Sehr geehrte Gemeinde,

ich habe hier ein kleines Anliegen und frage mich, ob mir jemand unter die Arme greifen könnte, da ich in Javascript eine absolute Flachpfeife bin.

Folgendes:

Ich habe hier ein kleines Script, das per jQuery das Hintergrundbild im BODY ändert.
Das habe ich auch so per Zweizeiler hinbekommen.

1. var images = ['bg-01.png', 'bg-02.png', 'bg-03.png', 'bg-04.png', 'bg-05.png'];
2. $('body').css({'background-image': 'url(/layout/cyt/img/' + images[Math.floor(Math.random() * images.length)] + ')'});

Quelltext in Zwischenablage kopieren

Jetzt kommt der Clou:
Je nach Hintergrundbild, soll ein anderes Div, das sich beliebig auf der Seite befindet, eingeblendet werden.

Sprich:

ist bg-02.png geladen, soll das div mit der class=“bg-02“ sichtbar sein,
ist bg-03.png geladen, soll das div mit der class=“bg-03“ sichtbar sein
usw...

Hat jemand eine Idee, wie ich das synchronisiert bekomme?
Mein Latein ist hier leider am Ende

Bin über jede Hilfe sehr dankbar.

Schon mal bei Zalando, Amazon oder eBay geguckt? Vielleicht wirst du dort fündig.

1. // Bild laden, ergibt sowas wie: url(http://domain.de/image_01.jpg), am besten einmal ausgeben lassen
2. var bgImage = $('body').css('background-image');
3.  
4. // Nummer filtern
5. bgImage=bgImage.replace('url(http://domain.de/image_','').replace('.jpg)','');
6.  
7. // alle layer ausblenden
8. $('.div-bg').hide();
9.  
10. // und einzelnen layer einblenden
11. $('.div-bg'+bgImage).show();

Quelltext in Zwischenablage kopieren

Beispiel: http://jsfiddle.net/rxDrh/1/

hey, vielen lieben Dank, caZpa!

habe das so interpretiert:

1. var images = ['bg-01.png', 'bg-02.png', 'bg-03.png', 'bg-04.png', 'bg-05.png'];
2. $('body').css({'background-image': 'url(/layout/cyt/img/' + images[Math.floor(Math.random() * images.length)] + ')'});
3.  
4. // Bild laden, ergibt sowas wie: url(http://domain.de/image_01.jpg), am besten einmal ausgeben lassen
5. var bgImage = $('body').css('background-image');
6.  
7. // Nummer filtern
8. bgImage.replace('url(http://www.billigerluxus.de/layout/cyt/img/','').replace('.png)','');
9.  
10. // alle layer ausblenden
11. $('.div-bg-01').hide();
12. $('.div-bg-02').hide();
13. $('.div-bg-03').hide();
14. $('.div-bg-04').hide();
15. $('.div-bg-05').hide();
16.  
17. // und einzelnen layer einblenden
18. $('.div-'+bgImage).show();

Quelltext in Zwischenablage kopieren

irgendwie, mag das aber noch nicht so ganz.

wenn ich das richtig verstanden habe, wird zuerst die url des hintergrundbildes ausgelesen.
diese wird dann verändert bis nur noch der dateiname ohne .png zurückbleibt.

diese variable wird dann am ende benuzt um das div sichtbar zu machen, oder?

hm ne, so geht es natürlich einfacher du kannst doch die Zufallszahl in einem Extraschritt ermitteln und somit zwischenspeichern, dann kannst du sie auch für die Layer benutzen

1. var images = ['bg-01.png', 'bg-02.png', 'bg-03.png', 'bg-04.png', 'bg-05.png'],
2.  
3. // Zufallszahl speichern
4. randomIndex = Math.floor(Math.random() * images.length);
5.  
6. // Bild holen
7. $('body').css({'background-image': 'url(/layout/cyt/img/' + images[randomIndex] + ')'});
8.  
9. // alle layer ausblenden
10. $('.div-bg-01').hide();
11. $('.div-bg-02').hide();
12. $('.div-bg-03').hide();
13. $('.div-bg-04').hide();
14. $('.div-bg-05').hide();
15.  
16. // und einzelnen layer einblenden
17. $('.div-bg-0'+randomIndex ).show();

Quelltext in Zwischenablage kopieren


aber bitte nicht x–mal

1. $('.div-bg-xx').hide();

Quelltext in Zwischenablage kopieren
ausführen

wenn du den layern alle eine Extraklasse gibst (hier: div-bg), kannst du sie in einem Schritt ausblenden.

1. <div class="div-bg div-bg-01"></div>
2. <div class="div-bg div-bg-02"></div>
3. <div class="div-bg div-bg-03"></div>
4. <div class="div-bg div-bg-04"></div>
5. <div class="div-bg div-bg-05"></div>
6.  
7. //alle ausblenden
8. $('.div-bg').hide();

Quelltext in Zwischenablage kopieren

Oder hierarchisch, wenn sie ein Elternelement haben

1. <div id="bg-layer">
2. <div class="div-bg-01"></div>
3. <div class="div-bg-02"></div>
4. <div class="div-bg-03"></div>
5. <div class="div-bg-04"></div>
6. <div class="div-bg-05"></div>
7. </div>
8.  
9. //alle ausblenden
10. $('#bg-layer>div').hide();

Quelltext in Zwischenablage kopieren

das sieht schonmal sehr gut aus

nur dass er sich noch um -1 verzählt.
also wenn die grafik 02 geladen wird, blendet er das div 01 ein.

wenn die grafik 01 geladen wird, versucht er 00 einzublenden. (also passiert nichts)

jetzt hab ich es verstanden
habe einfach alles bei 0 anfangen lassen

caZpa! vielen herzlichen dank für deinen einsatz!
habe wieder etwas dazugelernt

ach na klar, Array–Indizes beginnen natürlich bei 0... naja, hast es ja geschafft

caZpa schrieb am 12.04.12, 19:58 Uhr:

1. $('#bg-layer>div').hide();

Quelltext in Zwischenablage kopieren

das „>“ braucht man aber nicht :smartypants

was die null im bild name angeht → Math.ceil anstatt Math.floor