Auf Thema antworten

Beitrag

[QUOTE="catlady, post: 11453, member: 2149"]
Hi,

ich habe einen interaktiven Adventkalender erstellt.

Die 24 Türchen habe ich als Aufzählingsliste platziert (1-24 der Reihe nach).
Hinter jedem aktiven Türchen liegt ein Bild, welches zu einer x-beliebigen URL verlinkt.

Das funktioniert in der normalen Reihenfolge (1-24) super, aber jetzt möchte ich das ganze random machen und da weiß ich nicht weiter.

[CODE=html]<div class="content">

      <ul>
        <li><div class="door" id="door18"><img class="imgDoor" src="img/door18.png" alt="18. Türchen" width="120"/></div></li>
        <li><div class="door" id="door14"><img class="imgDoor" src="img/door14.png" alt="14. Türchen" width="120"/></div></li>
        <li><div class="door" id="door9"><img class="imgDoor" src="img/door09.png" alt="9. Türchen" width="120"/></div></li>
        <li><div class="door" id="door1"><img class="imgDoor" src="img/door01.png" alt="1. Türchen" width="120"/></div></li>
        <li><div class="door" id="door3"><img class="imgDoor" src="img/door03.png" alt="3. Türchen" width="120"/></div></li>
        <li><div class="door" id="door16"><img class="imgDoor" src="img/door16.png" alt="16. Türchen" width="120"/></div></li>
      </ul>
</div>[/CODE]

Hier das Skript. Muss ich da was in der Schleife ändern?

[CODE=javascript]<script>
$( document ).ready(function() {
// reihenfolge random
var numbers = ["18", "14", "09", "01", "03", "16", "05", "15", "08", "10", "20", "11", "12", "23", "17", "04", "07", "19", "13", "21", "06", "22", "02", "24"];

var urls =
["https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com",
"https://www.xzy.com" ];

var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var scrolled = false;
var timeDelay = 500;

if(month === 12) {
    // schleife fuer alle tages tuerchen
    $("li").each( function( index ) {
      var adventwindow = index + 1;
      var item = $(this);

// vergangene tuerchen oeffnen
      if( day !== adventwindow && adventwindow < day ) {
  
      window.setTimeout(function(){
        item.children(".door").addClass("open");
        item.children(".back").css({opacity: 0, visibility: "visible"}).animate({opacity: 0.6}, 500);
        }, timeDelay);
      }
      // END tueroeffnung
 
      // tuercheninhalt / background hinzufuegen
      if( adventwindow <= day ) {
        var number = numbers[index];
        var url = urls[index];
        $(this).append('<div class="back"><a href="' + url + '" target="_blank" class="imgDoor"><img src="img/' + number + '_background.png"></a></div>');
      }
      // END tuerinhalt

// klick auf tuerchen, oeffnen/schließen
      $(this).on("click", function() {
      
        // alle vergangenen tage
        if(adventwindow <= day ) {
                 $(this).children(".door").toggleClass("open");
            item.children(".back").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500);
        } else {
        }

// zukünftige tage
        if(adventwindow > day) {
                 $(this).children(".door").removeClass("open");
        }

// vergangene tage
        if(adventwindow < day) {
            $(this).children(".door").toggleClass("open");
        }

});
      // END onclick

});
    // END schleife
  }
  // END if monat dezember
});
</script>[/CODE]

Danke
[/QUOTE]

Authentifizierung