erstellt am 9. Juli 2009 in web | 2 Kommentare

Die Slideshow basiert auf Prototype sowie Scriptaculous und ermöglicht verschiedene Instanzen. Die Darstellung erfolgt über eine unsortierte Liste. Dadurch ist es möglich neben Bildern und Fotos auch anderen HTML-Code wie auch einfache Texte darzustellen.

Hier das Beispiel wie die Galerie umgesetzt ist.

Das Javascript zur Slideshow:

function init() {

  var slides = document.getElementsByClassName('slide-show');

  for(i=0;i<slides.length;i++){

    var lis = $(slides[i].id).getElementsByTagName('li');

    for( j=0; j < lis.length; j++){
      if(j!=0){
        lis[j].style.display = 'none';
      }
    }
    end_li = lis.length -1;

    setTimeout(swapElements(0,0,end_li, 3000, lis), 2000);
  }
}

function swapElements(cur_li, start_li, end_li, delay, lis) {

  return (function() {
    Effect.Fade(lis[cur_li],{ duration:3, from:1.0, to:0.0 });

      if (cur_li == end_li) {
        cur_li = start_li;
      } else {
        cur_li++;
      }	

      Effect.Appear(lis[cur_li], { duration:3, from:0.0, to:1.0 });

      setTimeout(swapElements(cur_li,start_li,end_li,delay,lis),
      delay + 3000);
    }
  )
}

Event.observe(window, 'load', init, false);

Alle Elemente mit der Klassendefinition ‚slide-show‚ werden durchlaufen und für jedes Listenelement werden die Bilder nacheinander ausgewechselt.

Damit die Positionierung der Galerie bei den Überblendeffekten sichergestellt ist empfiehlt es sich, einige Anpassungen im CSS vorzunehmen.

Der CSS-Code:

.slide-show li{

  position:absolute;

  list-style:none;
  display:block;
  width:200px;
  height:200px;
  overflow:hidden;
}

Wichtig dabei ist, dass die Listenelemente absolut positioniert werden damit sie beim Wechseln eine feste Position behalten und nicht verschoben werden.

Die Ausgabe der Slideshow erfolgt, wie schon gesagt, über eine unsortierte Liste.

Der HTML-Code dafür ist folgender:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr...

Da das Javascript auf alle Objekte mit der Klassendefinition ‚slide-show‚ zugreift, muss diese Angabe im HTML-Code mit der Klasse aus dem Javascript übereinstimmen.

Beispielcode herunterladen
Dateigröße: 69KB | Dateityp: .zip