| Javascript: Slideshow |
| Geschrieben von: Andreas Berger |
| Samstag, den 19. April 2008 um 07:47 Uhr |
bretteleben.de JavaScript Slideshow - Updated 20100412!Ein einfaches SlideshowScript, es startet wahlweise auf Klick oder beim Laden der Seite, der Übergang erfolgt mit einem Fading, das Script läuft NonStop. DarstellungDas Script stellt in einem DIV-Container die ausgewählten Bilder dar. Es wird wahlweise automatisch gestartet und/oder über optionale Kontrollelemente gesteuert. Beim Laden der Seite wird der Inhalt des ausgewählten DIV-Containers mit den Bildern der Slideshow überschrieben. Das bietet die Möglichkeit, ein Bild in diesem DIV-Container statisch einzubinden und damit einen Fallback für Besucher mit deaktiviertem Javascript anzubieten. Auch ein Hinweistext wie z.B. "Die Slideshow erfordert Javascript" ist vorstellbar. FunktionsweiseDie Funktionsweise des Scripts ist denkbar einfach. In einem umgebenden DIV-Container liegen alle Bilder übereinander. Das "Übereinander" wird dabei über die Angabe des z-index realisiert. Bei den Übergängen von einem Bild zum Anderen wird dann einfach - wie bei einem Stapel Spielkarten - immer das oberste Bild ausgeblendet und kommt ganz unter wieder in den Stapel. Mehr ist nicht dahinter. Einrichtung und Konfiguration:Die Einbindung in die Seite und die Verwendung der einzelnen konfigurierbaren Parameter sind auf drei Beispielseiten ausführlich erklärt: DemoBeispiel zweier Slideshows auf einer Seite (in einem Inline-Frame angezeigt):
KompatibilitätHinweis: im Internet Explorer werden kleinere Bilder nicht vertikal zentriert, in allen anderen getesteten Browsern schon.
|
| Zuletzt aktualisiert am Montag, den 12. April 2010 um 21:23 Uhr |
