Zufallsbildcode optimierung

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Xapoer

Neues Mitglied
18 Februar 2021
2
0
1
28
Hallo,

ich habe für ein Kunstprojekt eine Seite gebaut, auf der 16 Bilder übereineinander an der selben Position angezeigt werden.
Es sind quasi 16 ebenen übereinander gelegt. In jeder Ebene wird also ein Bild von 28 Bildern ausgewählt. Der Code zeigt zusätlich die Auswahl der Bilder und die Reihenfolge an. Das bedeutet , dass zwar die div Position des bildes immer die gleiche ist, aber jede ebene hat eine eigenen Postion in der die Zahl des jeweiligen Bildes angeziegt wird. Meine Frage ist , wie und ob es möglich ist den code so umzuschreiben, dass der Code auf eine textdatei mit den aufgelisteten Bilder und den entsprechend zugeordneten Zahlen zugreift. Dies würde mir die Ergänzung mit weiteren Bildern erleichtern. Ich hoffe ich habe es halbwegs verständlich erklärt.

Der code ist zu lang deswegen musste ich ihn als Datei anheften.










Viele grüße
Alex
 

Anhänge

  • codehtmlforum.txt
    81 KB · Aufrufe: 3
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.192
434
83
68
Hallo Alex und willkommen im Forum!
Da weiß man gar nicht, wo man anfangen soll ...

Soll diese Seite der Allgemeinheit zugänglich sein? In dem Fall sehe ich das Problem, dass sie überhaupt nicht responsiv ist, d. h. sie arbeitet mit festen Abmessungen und passt sich nicht an die Abmessungen des Browserfensters an. Und rechts bei "create", "new" und "print" kommt es zu Überlappungen.

Um auf deine eigentliche Frage einzugehen:
Meine Frage ist , wie und ob es möglich ist den code so umzuschreiben, dass der Code auf eine textdatei mit den aufgelisteten Bilder und den entsprechend zugeordneten Zahlen zugreift.
Die einfachste Lösung wäre, die beiden Arrays mit den Bild-URLs und den Links in eine externe Javascript-Datei auszulagern. Dann sind sie von dem übrigen Code abgetrennt und Du brauchst nur diese Datei zu editieren, wenn Bilder hinzu kommen.

Einen Schritt weiter könnte man die Datei im CSV-Format organisieren und auf dem Server ablegen. Man müsste sie dann mit PHP einlesen, die einzelnen Zeilen zerlegen und an Javascript übergeben.

Unabhängig wie man diese Datei ablegt und organisiert scheint mir, dass die Position nach einem bestimmten Muster fest gelegt wird: left wird immer um 30px erhöht. Das kann man auch automatisch durch Javascript erledigen, dann musst Du nicht von Hand für jede Zahl einen Satz von CSS-Anweisungen schreiben.
 

Xapoer

Neues Mitglied
18 Februar 2021
2
0
1
28
Hallo.

Danke erstmal für die schnelle Antwort. Ersteinmal möchte ich noch dazu sagen, dass ich totaler Anfänger bin was html angeht.

Am Design mit den Abmessungen wollte ich eh noch arbeiten. Aber auch da fehlt mir etwas das Knowhow um dei Anpassungen automatisch zu machen.


Aber zu meiner Hauptfrage:

"Die einfachste Lösung wäre, die beiden Arrays mit den Bild-URLs und den Links in eine externe Javascript-Datei auszulagern. Dann sind sie von dem übrigen Code abgetrennt und Du brauchst nur diese Datei zu editieren, wenn Bilder hinzu kommen."

Das wäre meine Frage, wie genau ich das anlege.



"Einen Schritt weiter könnte man die Datei im CSV-Format organisieren und auf dem Server ablegen. Man müsste sie dann mit PHP einlesen, die einzelnen Zeilen zerlegen und an Javascript übergeben.

Unabhängig wie man diese Datei ablegt und organisiert scheint mir, dass die Position nach einem bestimmten Muster fest gelegt wird: left wird immer um 30px erhöht. Das kann man auch automatisch durch Javascript erledigen, dann musst Du nicht von Hand für jede Zahl einen Satz von CSS-Anweisungen schreiben."


Hier wird es schon sehr schwer verständlich für mich was genau ich dort tun müsste.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.192
434
83
68
Dann fangen wir mal mit dem einfachsten an: Du hast ja in deinem Javascript diese beiden Arrays:
Code:
var image = new Array(); 
var link = new Array(); 

/** Hier die (Zufalls)-Bilder eintragen. **/

image[1] = '/smprojects/crswlmnix/1.png';
image[2] = '/smprojects/crswlmnix/2.png';
image[3] = '/smprojects/crswlmnix/3.png';
image[4] = '/smprojects/crswlmnix/4.png';
image[5] = '/smprojects/crswlmnix/5.png';
image[6] = '/smprojects/crswlmnix/6.png';
image[7] = '/smprojects/crswlmnix/7.png';
image[8] = '/smprojects/crswlmnix/8.png';
image[9] = '/smprojects/crswlmnix/9.png';
image[10] = '/smprojects/crswlmnix/A.png';
image[11] = '/smprojects/crswlmnix/B.png';
image[12] = '/smprojects/crswlmnix/C.png';
image[13] = '/smprojects/crswlmnix/D.png';
image[14] = '/smprojects/crswlmnix/E.png';
image[15] = '/smprojects/crswlmnix/F.png';
image[16] = '/smprojects/crswlmnix/G.png';
image[17] = '/smprojects/crswlmnix/H.png';
image[18] = '/smprojects/crswlmnix/I.png';
image[19] = '/smprojects/crswlmnix/J.png';
image[20] = '/smprojects/crswlmnix/K.png';
image[21] = '/smprojects/crswlmnix/L.png';
image[22] = '/smprojects/crswlmnix/M.png';
image[23] = '/smprojects/4mix/N.png';
image[24] = '/smprojects/4mix/O.png';
image[25] = '/smprojects/4mix/P.png';
image[26] = '/smprojects/4mix/Q.png';
image[27] = '/smprojects/4mix/R.png';
image[28] = '/smprojects/4mix/S.png';



/** Hier die (Zufalls)-Links eintragen. **/

link[1] = '1w';
link[2] = '2w';
link[3] = '3w';
link[4] = '4w';
link[5] = '5w';
link[6] = '6w';
link[7] = '7w';
link[8] = '8w';
link[9] = '9w';
link[10] = 'Aw';
link[11] = 'Bw';
link[12] = 'Cw';
link[13] = 'Dw';
link[14] = 'Ew';
link[15] = 'Fw';
link[16] = 'Gw';
link[17] = 'Hw';
link[18] = 'Iw';
link[19] = 'Jw';
link[20] = 'Kw';
link[21] = 'Lw';
link[22] = 'Mw';
link[23] = 'Nw';
link[24] = 'Ow';
link[25] = 'Pw';
link[26] = 'Qw';
link[27] = 'Rw';
link[28] = 'Sw';
Diesen Code schreibe in eine getrennte Datei, z. B. data.js und binde diese dann in deiner HTML-Seite ein, so:
Code:
<div id="bildposition" id="nichtmarkieren" align="center">
<!-- Javascript-Datei data.js einbinden -->
<script src="data.js"></script>
<script language="JavaScript" type="text/javascript">

// hier den Code mit der Definition der Arrays loeschen

/** Ab hier nichts mehr ändern! **/

var num = Math.random();
var ran = Math.floor((image.length - 1) * num) + 1;
// usw., der vorhandene Code
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.192
434
83
68
PPS zu diesem:
scheint mir, dass die Position nach einem bestimmten Muster fest gelegt wird: left wird immer um 30px erhöht. Das kann man auch automatisch durch Javascript erledigen, dann musst Du nicht von Hand für jede Zahl einen Satz von CSS-Anweisungen schreiben.
Wenn ich mir die resultierende Ansicht im Browser ansehe, sieht es so aus, dass die Elemente einfach nebeneinander von links nach rechts angeordnet sind. Das kannst Du, anstatt mit mühevoller absoluter Positionierung, auch einfacher erreichen: Einfach einen Container anlegen, die Elemente hintereinander hinein schreiben und mit display: flex; nebeneinander anordnen.
 
Zuletzt bearbeitet:
Werbung:
Werbung:

Neueste Beiträge