| 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.
|
| Datei | Zuletzt bearbeitet |
|---|---|
 bretteleben.de.slideshow.20100412.zip | 2010-04-12 |
Hallo !
Finde Ihr Script toll. Gibt es einen Grund, warum es in Firefox 11 und jetzt 12 auf dem Mac nicht funktioniert ?
der Firebug zeigt einen "Fehler":
er gibt zu der Zeile 86 (siehe fett) die Meldung aus: pnext.style.removeAttribute is not a function
try{pnext.style.removeAttribute("filter");} catch(err){}
Danke
Christian
Hallo Christian!
Aus dem Stegreif kann ich das nicht klären, da ich keinen Mac zur Hand habe. Ich werde mich aber schlau machen.
Inzwischen können Sie die Zeile getrost auskommentieren. Sie soll nur sicherstellen, dass im Internet Explorer bei wirklich schwarzen Stellen im Bild keine weißen Fragmente auftreten (ein IE-Problem). Die Slideshow funktioniert aber tadellos.
Gruß
Andreas
Hi,
wäre es noch möglich den einzelnen Bildern in der Slideshow entsprechende Links zuzuweisen ?
Hallo N.Mayer!
Ja, natürlich. Ich bin nur nie dazu gekommen. Wenn Du aber Google mit "javascript slideshow linked images" fütterst, dann wirst Du mit Scripts erschlagen. :)
Gruß
Andreas
Hallo,
erstmal vielen Dank für die Bereitstellung dieses tollen Skriptes. Genau das habe ich gesucht. Ich hätte nur noch zwei Fragen dazu. Ist es möglich auch beim manuellen umschalten der Bilder einen Übergang einzubauen? Und, kann man die Slideshow automatisch beim Seitenaufruf starten lassen?
Vielen Dank!
Beste Grüße,
Adam
Hallo Adam!
Ja, natürlich. Das Script ist unter der GPL lizensiert, das bedeutet, Du kannst es modifizieren wie Du möchtest (solange Du den Vorgaben der GPL folgst :)).
Zu Deiner zweiten Frage, um die Slideshow automatisch beim Seitenaufruf zu starten (wie das ja auch hier passiert) setz die Variable "def_startwhen" im Script auf "y".
Gruß
Andreas
Hallo Andreas!
Vielen Dank für das Script und die Erklärungen. Trotz völliger Javascript-Unwissenheit hat der Einbau samt Variationen auf 2 verschiedenen Seiten wunderbar geklappt.
Ich würde gerne noch eine Pausenfunktion hinzufügen: entweder onClick (auf das aktuelle Bild, weil ich keine Kontrollbuttons verwenden möchte) oder bei hover. Google hat einige Lösungen in jQuery ausgespuckt, aber die Frage ist, welche am elegantesten zu bretteleben passt. :)
Lg
Barbara
Hallo Barbara!
Am elegantesten wäre es, wenn Du nicht extra ein komplettes Framework wie jQuery bemühst sondern die Funktionen zum Stoppen/Starten, die ja ohnehin im Script vorhanden sind, von den onClick-Events der Buttons auf einen onMouseover und onMouseout Event des DIVs der Slideshow umbiegst.
Gruß
Andreas
Hallo
Ist es möglich den z index des divs slideshow per klick zum ändern. möchte gerne das die slideshow über einen layer div eingeblendet und ausgeblendet werden kann.
Hallo bernhard!
Um einen Layer über der Slideshow aus-/einzublenden muss er einen Z-Index haben, der höher ist, als die von der Slideshow verwendeten (also mindestens 3) und der Layer muss (damit das auch im Internet Explorer funktioniert) das CSS Attribut "position" (entweder "absolute" oder "relative") gesetzt haben.
Den zIndex der Slideshow zu ändern ist natürlich auch möglich, das Script ist GPL-lizensiert, man kann also nach Lust und Laune umbauen. Einfacher ist aber sicher die erste Variante, da der zIndex den einzelnen Bildern im Ablauf der Slideshow immer wieder neu zugewiesen wird.
Gruß
Andreas
Hat jemand eine Idee warum sich die Slideshow nicht via layer div ausblenden lässt. egal was ich mache sie liegt immer im vordergrund.
Sehr großes Lob und besten dank, habe viel gesucht um so etwas zu finden, denn überall fehlt eine vernünftige Beschreibung so wie sie hier vorhanden ist!!! :)
Gruß
Andreas T.
soeben eingebaut (ruka.ch/wir) - herzlichen dank
Hallo
Supi Script
Kann es sein das wenn ich größere Bilder (> 80kb) in die Slideshow packe, die Slideshow dann ins stocken gerät oder mache ich etwas falsch.
Bei kleineren Bildern hab ich keine Probleme.
Gruß aus Berlin
Hallo Tommy!
Naja, Du könntest den Wert, den Du beim Parameter var def_steps gesetzt hast reduzieren. Das vermindert die Prozessorlast.
Gruß
Andreas
Hi, wie bekomme ich es hin, dass er aus dem Bilderverzeichnis alles Automatisch ausliest und einfügt? sind ca. 100bilder
Bei Joomla ging es ja
Hallo Havoc!
Nachdem JavaScript als client-seitige Scriptsprache keinen Zugriff auf das Dateisystem am Server hat, könntest Du das z.B. über PHP lösen - so wie Joomla! das tut.
Gruß
Andreas