| 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 | 1970-01-01 |
Hallo Andreas,
wirklich ein super Script - vielen Dank! Ich bin blutiger Javascipt-Anfänger, war ganz glücklich ein so ein gut beschriebenes Script gefunden zu haben. Jetzt wollte ich aber meine Slideshow nach 5 Bildern schliessen lassen. Hab deine Beschreibung vom 30.Mai 2011 um 20.33 Uhr (Antwort nach 94) versucht. Jetzt stoppt das Bild nach dem 2. Bild schon. Was hab ich da falsch gemacht?
Würde mich über Antwort freunen - und Danke schonmal.
Gruß Claudia
Hallo Claudia!
Der Kommentar wurde zwar hier beim JavaScript gepostet, bezieht sich aber auf die "Simple Picture Slideshow", das äquivalente Joomla! Plugin.
Beim JavaScript sind die Zeilennummern anders:
Öffne die Datei be_slide.js.
In Zeile 149 ersetze: emax
durch: emax-1
In Zeile 160 ersetze: startim=1;
durch: startim=startim+1;
Und nach Zeile 161 füge als neue Zeile den Stop-Befehl ein: stopit=1;
Gruß
Andreas
Hallo!
erstmal Danke für diesen tollen Slideshowscript. Funktioniert Super! Jetzt zu meiner Frage: Ich habe verschiedene Logos, in der Slideshow dargestellt. Nun würde ich gerne, die einzelnen Logos auch verlinken, sodass wenn man auf eines der eingeblendeten Logos klickt, die entsprechende Website aufgeht. Ist das hier machbar oder muß ich da auf etwas anderes zurückgreifen?
PS. Ich bin in Sachen Java Script , noch Anfänger!
Danke für die Antwort!
Liebe Grüße!
Hallo Blackshaman!
Nein das geht nicht, ich bin ehrlich gesagt nie dazu gekommen, diese Funktionalität einzubauen. Aber wenn Du die Suchmaschine Deiner Wahl mit "slideshow with links" fütterst, dann wirst Du mit Alternativen erschlagen. :)
Gruß
Andreas
Hallo ich habe mal eine frage darf ich das Script auf der Webseite meiner Firma (Fotostudio) benutzen um Bilder zu zeigen oder muss ich dafür eine Nutzungsgebühr zahlen?
Hallo Christoph!
Das Script kann kostenlos heruntergeladen werden und ist unter der GPL lizensiert. Das bedeutet, dass es hinsichtlich der Nutzung auf kommerziellen Seiten keinerlei Einschränkungen unterworfen ist.
Natürlich ist es aber auch nicht verboten, Nutzungsgebühren zu bezahlen. Also wenn es Dir ein tiefes inneres Bedürfnis ist ... :)
Gruß
Andreas
Hallo Andreas,
vielen, vielen Dank für die schöne und unkomplizierte Slideshow. In meinem GoLive läuft alles prima, aber auf der Homepage (www.alice-dsl.net/h.v.schubert) leider nicht. Es läuft nur unter dem Punkt "Raumgestaltung", nicht auf den Seiten "Kurse" und "Wohnkosmetik". Offenbar werden die Bilder nicht gefunden. Oder liegt es daran, dass ich die Slideshow dreimal eingebaut habe? Was hab ich falsch gemacht, kannst Du mir helfen?
Grüße
Anita
Hallo Andreas,
also erst einmal: Ich finde es wirklich supertoll, dass Du nicht nur das Script zur Verfügung stellst, sondern sogar noch Hilfestellung "in allen Lebenslagen" bietest, schnell, unkompliziert und verständlich. Vielen Dank auch dafür!
Nach langem Herumprobieren hab ich nun mein Problem gelöst: Es lag schlicht und ergreifend daran, dass die Dateiendungen der nicht gefundenen Bilder in Großbuchstaben waren und meine Verlinkungen in Kleinbuchstaben. Warum kommt man auf die simpelsten Sachen immer erst ganz zum Schluss....
Danke auch für den Hinweis mit den Frames. Leider kann ich es ganz einfach nicht besser (bin absoluter Nichtskönner in der Beziehung) und ich hab auch nur Uraltprogramme zur Verfügung. Die Frames waren einfach erst mal der einfachste Weg für mich, das Onload-Problem zu umgehen. Hab mir aber fest vorgenommen, mich (auch) in der Beziehung weiterzubilden.
Grüße aus dem hohen Norden
Anita
Hallo Anita!
Es scheint an den Bildern zu liegen. Versuch mal die Bilder der Slideshows die nicht funktionieren so aufzurufen wie Du sie verlinkt hast. Z.B.: www.alice-dsl.net/h.v.schubert/Raum/pics2/pic03.jpg. Entweder gibt es das Bild nicht, oder die Rechte sind so gesetzt, dass es nicht angezeigt werden kann. Der Ordner sollte auf 755, die Bilder auf 644 gesetzt sein.
Davon abgesehen - wenn das eine Seite ist, die gerade neu entsteht, dann würde ich auf die Verwendung eines Framesets unter allen Umständen verzichten. Das ist einfach nicht mehr zeitgemäß.
Gruß
Andreas
Hallo Andreas,
super schöne Slideshow und gutes Script. Leider kriege ich die Slidshow in einem Dreamweaver-Template
basierenden Layout nicht zum Laufen, hättest Du einen Tipp, woran das liegen kann?
Liebe Grüße, Nepha
Generiere ich eine Seite ohne Vorlage läuft die Slideshow.
Hallo Nepha!
Ohne die Seite zu sehen kann ich nur raten, aber wie ich den Dreamweaver Kram so kenne, hast Du vermutlich ein ganz tolles Menü, bei dem die grafischen Buttons mittels JavaScript onHover wechseln.
Falls ja, dann findet sich im BODY-Tag der Seite aller Voraussicht nach ein onload-Befehl, der den onload-Event gnadenlos und ohne Rücksicht auf andere Scripts überschreibt und so die Slideshow killt.
Falls das so ist: Entweder das Dreamweaver-Script umbauen, damit es den Event nicht mehr vereinnahmt oder darauf verzichten oder eine andere Slideshow verwenden. :)
Gruß
Andreas
Hallo, Andreas.
Ich beabsichtige Dein Script zur Slideshow auf einer Internetseite zu verwenden, die ich verkaufen möchte. Hierbei bleiben selbstredend die Lizens und Programmiererkommentare bestehen. Ist das erlaubt oder kostet diese Art Nutzung etwas?
Gruß
Hallo Eurus!
Nein, das kostet nichts. Du solltest aber nicht nur selbst die Vorgaben der GPL beachten sondern auch Deinem Kunden explizit mitteilen, dass das Script unter der GPL lizensiert ist und diese Lizenz auch ihn bindet.
Gruß
Andreas
Guten Tag,
ist es denn möglich, die Bilder der Slideshow auch mit einem Text zu versehen? Und wenn ja, was müsste ich dann machen?
Viele Grüße, desu
Danke für die schnelle Antwort, andere Sripts habe ich ja schon gefunden, aber mir gefällt deines am Besten, denn in meiner Testphase kommt es mit 99 Bilder sehr gut zurecht.
Hallo desu!
Nein, ich bin bisher nie dazu gekommen das einzubauen, aber Du findest über (z.B.) Google jede Menge Slideshows die das können.
Gruß
Andreas
Hallo,
ist ein super Skript. Besteht auch die Möglichkeit, daß ich anstatt der Bilddateien auch HTML-Dateien aufrufen kann? Die Anpassung der Links im Skript auf HTML-Seiten hat nicht funktioniert.
Dank & Gruß
Hallo ikuzus600!
Nein, die Slideshow ist rein für Bilder ausgelegt, aber über Google oder in den großen Script-Archiven findest Du sicher jede Menge Scripts, die auch mit anderen Inhalten umgehen können.
Gruß
Andreas
Hallo,
klasse Script. Ich wollte das Script nach einem Durchlauf stoppen lassen beim letzten Bild.
Leider ist mir das nach Anleitung vom Dezember nicht gelungen. "emax-1" "startim+1" und "stopit=1". Evtl an falscher Stelle gesetzt.
Wird das in dem Abschnitt "[code]" gesetzt?
Viele Grüße
waelc
Hallo waelc!
Der Beitrag vom Dezember bezieht sich nicht auf die aktuelle Version. Bezogen auf Version 1.5.5 sieht das aus wie folgt:
Öffne die Datei be_slide.js.
In Zeile 143 ersetze: emax
durch: emax-1
In Zeile 155 ersetze: startim=1;
durch: startim=startim+1;
Und nach Zeile 156 füge als neue Zeile den Stop-Befehl ein: stopit=1;
Betreffend der Zeilennummern: Ich weiss ja nicht, mit welchem Betriebsystem/Editor Du arbeitest, aber schon der unter Windows standardmässig verfügbare Editor zeigt die jeweils aktuelle Zeilennummer an, wenn man die Statuszeile einschaltet.
Gruß
Andreas
Hallo,
kann das Javascript wirklich vollkommen kostenlos eingesetzt werden ??
Leider kann ich kaum englisch, und so verstehe ich die GPL Lizenz nicht.
Danke und viele Grüße
T. Sommer
Hallo Tatjana!
Ja natürlich, dazu ist es da.
Und nein, das kostet nichts. :)
Gruß
Andreas
Oh - entschuldigung.
Mit "einsetzen" meinte ich, dass ich so eine Bildershow auf meine Hompage setzen möchte - denn das sieht wirklich super toll aus (und scheint auch äußerst zuverlässig zu funktionieren).
Viele Grüße
Hallo Tatjana!
Das Script kann vollkommen kostenlos eingesetzt werden. Die Vorgaben der GPL sind zu beachten.
Und damit das Ganze nicht an der Sprache scheitert - nachfolgend ein Link zu einer inoffiziellen deutschen Übersetzung der GPL: http://www.gnu.de/documents/gpl.de.html
Wenn nach dem Lesen der Linzenz immer noch Fragen offen sein sollten: Wenn Sie mir verraten, was Sie mit dem Script vorhaben, dann kann ich Ihnen vermutlich auch sagen, ob das im Rahmen der Lizenz ist. Mit der bisherigen Frage tue ich mir da ein wenig schwer, denn "einsetzen" kann vieles sein. :)
Mit freundlichen Grüßen
Andreas