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

JQuery .toogle und .slideToogle funktionieren nicht auf Safari

R

roman@mkperformance

Neues Mitglied
Ich soll für einen Freund eine kleine Bildergalerie entwerfen, die durch 3 verschiedene Bilder mit Bildunterschrift toogled. Der Code funktioniert sowohl auf IE8+, Opera, Firefox und Chrome, aber auf Safari nicht, dort toogled nur die Bildunterschrift durch das Fenster, aber nicht die 3 Bilder und ichkann nicht herausfinden, warum.

Also hier ist der Code, der call Befehl ist im body-tag (<body onLoad="refGo()" >) . Ich hoffe jemand hat eine Idee warum es gerade auf Safari nicht ganz funktioniert!


JS:
  1. function refGo() {

  3. var bgCounter = 0;
  5. var naCounter = 0;
  9. names = [
  11. "Heimkino Gewinnspiel",
  13. "Traumwochenende Gewinnspiel",
  15. "SG Diana Schondorf"
  17. ];
  19. backgrounds = [
  21. "Referenzen/heimkino.png",
  23. "Referenzen/traumwe.png",
  25. "Referenzen/sgdiana.png"
  27. ];
  32. function changeBackground()
  33. {
  35. $( " #refText" ).slideToggle( "slow", function() {
  40. naCounter = (naCounter+1) % names.length;
  41. jQuery('#refText').text(names[naCounter]);
  45. });
  47. $( " #refChange" ).slideToggle( "slow", function() {
  50. bgCounter = (bgCounter+1) % backgrounds.length;
  51. $('#refChange').css('background', 'url('+backgrounds[bgCounter]+') no-repeat scroll center center / cover');
  55. });
  57. $( " #refChange " ).slideToggle( "slow", function() {
  65. });
  67. $( " #refText " ).slideToggle( "slow", function() {

  76. setTimeout(changeBackground,5000);
  77. });
  79. }
  83. changeBackground();
  84. }

html:


  1. <a href="referenzen.html"><h2 style="float: left; width:400px; margin-top: 15px;">Referenzen</h2>
  2. <div class="refStartpage">
  3. <div class="news" id="refChange"> </div>
  4. <div id="refText"></div>
  5. </div>
  6. </a>

css:

#refText {
font-style: italic;

}

#refChange {
float: left;
height: 200px;
margin-left: 20px;
margin-top: 15px;
width: 380px;
}

.refStartpage {
float: left;
height:400px;
width:380px;
}


Wäre klasse wenn mir jemand helfen könnte, ich komm hier einfach nicht weiter!
Vielen dank schon im vorraus!
 
Werbung:
Ich sehe das auf Anhieb jetzt nicht, aber der erste Schritt wäre, den Code aufzuräumen. Wenn du meinst, dass slideToggle() in diesem Kontext sinnvoll ist, reicht der einmalige Aufruf anstatt vier oder fünf mal. Der zweite Schritt wäre, die beiden Arrays in einem Objekt zu vereinen, also so:

Code: 
elements = {
  ''referenzen/heimkino.png" : "Heimkino Gewinnspiel",
  ......................
}

Bei der Gelegenheit würde ich auch die Pfade kleinschreiben. Alternativ dazu könntest du vorab einen funktionierenden background-image Switch schreiben und diesen anschließend erweitern.
 
Fand deinen Code und deinen Ansatz etwas unaufgeräumt.
Ich habe da mal ein Galerie Bespiel für dich geschrieben. Anbei die index.html, gallery.js und 3 Bilde. In der index siehst du so einen Aufruf. Darfst den Code gerne verändern soviel du willst.
Wenn du fragen hast, schreib hier rein :)
 

Anhänge

  • gallery.zip
    7,6 KB · Aufrufe: 3
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben