Warning: filemtime() [function.filemtime]: open_basedir restriction in effect. File(/home/www/web144/html/attachments/057_bretteleben.de.slideshow.20100412.zip) is not within the allowed path(s): (/var/www/clients/client396/web1968/web:/var/www/clients/client396/web1968/tmp:/var/www/web144.cyconf.de/web:/srv/www/web144.cyconf.de/web:/usr/share/php5:/tmp:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/lib/phpmyadmin:/usr/share/php:/home/www/web144/html:/home/www/web144/tmp) in /var/www/clients/client396/web1968/web/components/com_attachments/helper.php on line 477
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.

Darstellung

Das 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.

Funktionsweise

Die 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:

Slideshow Beispiel 01 - nur eine Slideshow, Standardkonfiguration
Slideshow Beispiel 02 - verschiedene Seiten mit je einer Slideshow, ein Script
Slideshow Beispiel 03 - mehrere Slideshows auf einer Seite, ein Script
Hinweis: Die Erklärungen bauen aufeinander auf.

Demo

Beispiel zweier Slideshows auf einer Seite (in einem Inline-Frame angezeigt):

 

Kompatibilität

Hinweis: im Internet Explorer werden kleinere Bilder nicht vertikal zentriert, in allen anderen getesteten Browsern schon.


Lizenz

Das Script ist unter der GNU Public License (www.gnu.org/copyleft/gpl.html) lizensiert.

aktuelle Version: 20090412

Version 20100412

- behebt im Internet Explorer das Problem weißer Punkte auf schwarzen (#000) Stellen im Bild

Version 20090406

- behebt einen Fehler, ausgelöst durch eine undeklarierte Variable bei aktiviertem Shuffle

Version 20090301

- Rewrite auf Basis des Joomla Plugins
- mehrere Slideshows auf einer Seite
- Einsatz auf verschiedenen Seiten mit einer Scriptdatei
- optionale Kontrollelemente
- optionales Starten mit Zufallsbild

Version 20081101

- keine absolute Positionierung auf der Seite mehr erforderlich
- Lizenz für zukünftige Versionen GNU/GPL

Version 20080502

Sonstiges

Wenn jemand Gelegenheit findet, auf seiner Webseite einen Link auf www.bretteleben.de zu setzen, dann freut mich das natürlich, weil es mithilft, das Script bekannter zu machen. Bislang ist das Javascript "slideshow" in verschiedenen JavaScript - Resourcen verlinkt, darunter auch dem größten mir bekannten JavaScript - Archiv: HotScripts.

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung, auch Berichte über Erfahrungen mit anderen Browsern/Betriebsystemen sind immer willkommen.

Download

Das ZIP-Archiv enthält eine Beispielseite. Mit dem Download erklären Sie sich mit den Bestimmungen der GNU Public License einverstanden.

Downloads:
DateiZuletzt bearbeitet
Diese Datei herunterladen (bretteleben.de.slideshow.20100412.zip) bretteleben.de.slideshow.20100412.zip1970-01-01
Zuletzt aktualisiert am Montag, den 12. April 2010 um 21:23 Uhr
 
Kommentare (30)
Script nach 5 Bildern schliessen?
20 Montag, den 28. November 2011 um 18:23 Uhr
@claudia

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

@claudia
Montag, den 28. November 2011 um 20:25 Uhr
A. Berger

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


 

Fotos verlinken...
19 Montag, den 21. November 2011 um 13:30 Uhr
Blackshaman

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!

@Blackshaman
Montag, den 21. November 2011 um 21:54 Uhr
A. Berger

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

Script auf Firmenseite nutzen
18 Donnerstag, den 20. Oktober 2011 um 18:23 Uhr
Christoph

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?

@Christoph
Donnerstag, den 20. Oktober 2011 um 19:03 Uhr
A. Berger

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

Bilder werden nicht gefunden?
17 Samstag, den 25. Juni 2011 um 20:35 Uhr
Anita

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

Bilder werden jetzt gefunde!!!
Montag, den 27. Juni 2011 um 20:09 Uhr
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

@Anita
Sonntag, den 26. Juni 2011 um 14:13 Uhr
A. Berger

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

DreamweaverVorlage
16 Dienstag, den 14. Juni 2011 um 13:44 Uhr
Nepha

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.

@Nepha
Dienstag, den 14. Juni 2011 um 21:29 Uhr
A. Berger

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

Gebrauch des Javascriptes
15 Montag, den 13. Juni 2011 um 17:35 Uhr
Eurus

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ß

@Eurus
Montag, den 13. Juni 2011 um 20:12 Uhr
A. Berger

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

Slideshow, Bilder mit Text?
14 Sonntag, den 12. Juni 2011 um 10:24 Uhr
desu

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

Slideshow, Bilder mit Text?
Dienstag, den 14. Juni 2011 um 17:35 Uhr
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.

@desu
Montag, den 13. Juni 2011 um 20:50 Uhr
A. Berger

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

Aufruf von HTMl-Seiten
13 Dienstag, den 31. Mai 2011 um 09:41 Uhr
ikuzus600

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ß

@ikuzus600
Dienstag, den 31. Mai 2011 um 21:03 Uhr
A. Berger

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

Script stoppen nch einem Durchlauf ohne Navi
12 Samstag, den 28. Mai 2011 um 14:49 Uhr
waelc

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

@waelc
Montag, den 30. Mai 2011 um 20:33 Uhr
A. Berger

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

Kosten
11 Dienstag, den 17. Mai 2011 um 15:23 Uhr
Tatjana Sommer

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

@Tatjana
Donnerstag, den 19. Mai 2011 um 21:48 Uhr
A. Berger

Hallo Tatjana!

Ja natürlich, dazu ist es da.
Und nein, das kostet nichts. :)

Gruß
Andreas

Einsatzgebiet
Donnerstag, den 19. Mai 2011 um 17:20 Uhr
Tatjana

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

@Tatjana Sommer
Dienstag, den 17. Mai 2011 um 20:08 Uhr
A. Berger

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

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 171 Gäste online