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)
Javascript-Slideshow
10 Freitag, den 13. Mai 2011 um 16:12 Uhr
Frank Steineck

Vielen Dank Andreas für das tolle Script ! Einen Backlink habe ich auf meiner Seite http://frank-steineck.de/galerien.php eingebaut, kleine Spende ist unterwegs.

Meine 3 Slideshows laufen gut, eine Kleinigkeit ist mir jedoch aufgefallen. Nachdem ich meine Seiten von html-strict auf html-transitional umstellen musste, weil der W3C-Validator sonst meckert, werden Querformatbilder nicht mehr zentriert sondern oben dargestellt (Firefox und IE). Bei strict war alles perfekt. Gibt es einen Tip, wie das auch bei html-transitional so gut funktioniert?

Gruß
Frank

@Frank Steineck
Freitag, den 13. Mai 2011 um 22:31 Uhr
A. Berger

Hallo Frank!

Danke sowohl für den Backlink als auch die großzügige Spende!
Was Deine Frage angeht - bislang nicht. Es funktioniert auch im STRICT-Mode nicht durchgängig, der Internet Explorer weigert sich hartnäckig das Bild vertikal zu zentrieren. Alle anderen gängigen Browser (in den jeweils aktuellen Versionen) können das mittlerweile.
Nicht desto trotz, ich werde mich in den nächsten Tagen mal umsehen, ob es in der Angelegenheit neue Ansätze gibt - vielleicht findet sich ja Brauchbares.

Gruß
Andreas

Slideshow
9 Montag, den 09. Mai 2011 um 21:47 Uhr
Jan

Hi, danke für deine schnelle Antwort!

Es geht um die Slideshow auf www.jankrenzer.de.
Die Bilder ab 31 habe ich noch nie als Startbild gehabt. Lässt  man die Slideshow laufen kommen alle Motive, aber für den Zufallsstart  werden nur Bilder darunter genommen.
Und dann habe ich noch ein Problem das komplette Bild als Link  anzulegen. Hatte gefunden das man hierzu in Zeile 191 etwas ändern muss.
(myhtml+="<a href='home.html'<img src="'+imges[(b-1)]+" style="vertical-align:middle;border:0;" alt="''/" / ></div >";)
Im Safari läuft das auch, nur der neue Firefox 4 bekommt das nicht hin. Kann das sein?
Ich bin übrigens Mac User und teste auch nur auf Macs im Umfeld.

Besten Dank und viele Grüße,
Jan

@Jan
Dienstag, den 10. Mai 2011 um 20:50 Uhr
A. Berger

Hallo Jan!

Zur Startreihenfolge:
Ich gebe zu, ich habe nicht öfter als vielleicht 100x auf Refresh geklickt, mein Ergebnis ist also nicht wirklich gesichert. Trotzdem, ich habe keins der letzten 5 Bilder gesehen und anstatt noch stundenlang herumzuklicken wage ich einfach die Vermutung, dass es vielleicht ein Problem im zeitlichen Ablauf gibt.
Versuch mal, die Zeit die das jeweilige Bild voll angezeigt wird (def_sdur) merklich (um ein Mehrfaches) zu erhöhen und check die Slideshow dann nochmals.

Zum Link:
Doch, das funktioniert auch im Firefox. Vielleicht liegt das Problem in der Modifikation, die Du vorgenommen hast. Es kann natürlich auch an der Kommentar-Komponente hier auf bretteleben.de liegen (sie ist nicht sehr nett zu Code), aber der Abschnitt in Deinem Kommentar ist ziemlich verhackstückt.
Wenn Du Lust hast, dann schick mir eine Email (Emailadresse im Menüpunkt "Kontakt" im Topmenü), per Mail lässt sich Code besser übermitteln.

Gruß
Andreas

Random Problem
8 Donnerstag, den 05. Mai 2011 um 19:02 Uhr
Jan

Hallo,


ich habe über das Script aktuell 36 Bilder eingebettet und das Zufallsprinzip eingeschaltet.
Im Durchlauf werden alle Bilder gezeigt, aber trotz Slideshow startet die Seite immer mit den gleichen Bildern.
Es ist nicht immer das gleiche Bild, aber es werden bestimmte Bilder für den Start genommen, nicht aber alle 36.
Woran könnte das liegen?

Vielen Dank und viele Grüße,
Jan

@Jan
Donnerstag, den 05. Mai 2011 um 20:19 Uhr
A. Berger

Hallo Jan!

Ich gebe zu, ich teste nicht mit 36 Bildern, weil man alleine schon bei den 5 Bildern des Beispielscripts einige Refreshs braucht um alle 5 zu sehen - aber sie kommen. Alle. Und auch an der Funktion sehe ich keinen Fehler.
Mit wie vielen Refreshs hast Du denn Deine 36 Bilder getestet? Und welche Bilder werden verwendet, bzw. welche nicht?

Gruß
Andreas

Firefox/IE
7 Donnerstag, den 05. Mai 2011 um 15:04 Uhr
nothin_

Hallo zusammen,

erstmal ein Lob an den Autor des Scripts - hat bisher super geklappt und die Installation ist denkbar einfach (jedenfalls für den Firefox ... ;)
Leider klappt die Sache im Internet Explorer nicht wie gewünscht - wenn ich folgende Seite im Internet Explorer öffne kommt ein Fehler (document.getElementByID(...)' is null or not an object).
http://cernenschek.at.dd2512.kasserver.com/index.php?option=com_simplelists&view=simplelist&category_id=42&Itemid=60
Hat jemand eine Idee woran das liegen kann?

Schöne Grüße!
nothin_

@nothin_
Donnerstag, den 05. Mai 2011 um 20:37 Uhr
A. Berger

Hallo nothin_!

Es ist nicht so schlimm wie Du meinst - es ist schlimmer. :)

Das Script funktioniert nicht nur im Internet Explorer nicht, es funktioniert in keinem Browser. Nur sind die Anderen so rücksichtsvoll, bei JavaScript-Fehlern nicht gleich mit kleinen Popups um sich zu werfen.

Das Problem ist aber reltiv einfach zu beheben: Du verweist das JavaScript (be_slide.js) auf einen DIV-Container mit der Identity "slideshow". Den gibt es aber auf der Seite nicht. Erzeuge ihn und das Problem ist behoben.

Und wenn Du schon dabei bist, den Inhalt der Seite zu überbeiten: Du hast beim Kopieren der Inhalte aus Microsoft Word Unmengen der Office-Formatierungen mit übernommen. Check mal den Quelltext - die gehören da alle nicht hin! :)

Gruß
Andreas

Falsche Darstellung in Chrome
6 Montag, den 02. Mai 2011 um 11:38 Uhr
Johannes

Hallo nochmal,

also die Demo Slideshows hier, werden in Chrome bei mir richtig dargestellt. Der fehler muss also irgendwo bei mir liegen.
Hier der Link: http://www.dhost.info/barcelona/slideshowtest.html

Mein Betriebssystem ist Windows 7 und die Chrome Version ist 11.0.696.60.

Danke!

@Johannes
Montag, den 02. Mai 2011 um 21:46 Uhr
A. Berger

Hallo Johannes!

Stimmt, der Fehler liegt bei Dir. :)
Du zerschießt die Slideshow mit Deinem Stylesheet (-webkit-box-shadow).

Gruß
Andreas

layers
5 Freitag, den 29. April 2011 um 15:11 Uhr
Hans Kroonenberg

Hi,

Is it possible to ad some div layers on top of your slideshow. It seems that adding a z-index to the div where the slideshow is in doesn't work.
Please let me know,

Thanks
Hans

@Andreas
Sonntag, den 01. Mai 2011 um 15:24 Uhr
Hans

Hi Andreas,

Forget my reply, i just found it. All works fine now.
Great script by the way

Thanx
Hans

@Andreas
Sonntag, den 01. Mai 2011 um 15:18 Uhr
Hans

Hi Andreas,

This doesn't look like rocket science but i'm still missing something.
Also with a zindex of 10 for the div that should come on top your slideshow is still being shown on top.

Maybe you can take a look and help me out: www.ons-id.nl/start/index.html

Thanx in advance
Hans

@Hans Kroonenberg
Samstag, den 30. April 2011 um 12:13 Uhr
A. Berger

Hi Hans!

Don't try to set a zIndex for the div that holds the slideshow, the slideshow already handles it's zIndex itself. Just set a zIndex of 5 or above for the layer you want to show on top of the slideshow.

Best regards
Andreas

Falsche Darstellung in Chrome
4 Mittwoch, den 27. April 2011 um 14:29 Uhr
Johannes

Hallo,

die Bilder der Slideshow werden bei mir im Google Chrome Browser nur zur hälfte angezeigt bzw. halbiert abgespielt. In allen anderen Browser funktioniert das aber ohne Probleme.
Hat vielleicht jemand eine Idee woran das liegen könnte?

Mit freundlichen Grüßen
Johannes

@Johannes
Mittwoch, den 27. April 2011 um 20:39 Uhr
A. Berger

Hallo Johannes!

Passiert das auch auf dieser Seite hier (für mich funktioniert Sie in Chrome 11.0.696.57 unter Windows Vista einwandfrei)? Wenn auf dieser Seite alles funktioniert, dann poste bitte einen Link zu Deiner Seite, ich schau mir das gerne an.
Wenn der Fehlr bei Dir auch hier auftritt, dann poste bitte Deine Chrome Version und Dein Betriebssystem.

Gruß
Andreas

Link für jedes Bild
3 Mittwoch, den 13. April 2011 um 23:34 Uhr
Stefan

hallo,

ganz tolles script. läuft auch schon.
wie ich einen gesamtlink zufüge, habe ich unten im kommentar schon gesehen.
(myhtml+=" a href="/web1.html"> img src="'+imges[(b-1)]+" border="0" alt="''/" style="vertical-align:middle;border:0;" /> /a>)
wie kann ich denn für jedes bild einen eigenen link zufügen?
danke für tips.

gruß
stefan

@Stefan
Donnerstag, den 14. April 2011 um 20:28 Uhr
A. Berger

Hallo Stefan!

Bislang ehrlichgesagt garnicht. Die Funktionalität ist nicht vorhanden. Aber in Scriptarchiven wie hotscripts.com oder einfach über Google finden sich jede Menge Slideshows, die das können.

Gruß
Andreas

Script not working :(
2 Sonntag, den 10. April 2011 um 20:12 Uhr
Erica

Hi,

Thanks for the amazing script!
Im having trouble getting the script to work in my html page. I have inserted the html element of the code in my index page, code in the appropriate place, with a link to my external javascript file.
I haven't altered anything apart from the auto script start?
Any help appreciated!

Thanks
Erica

@Erica
Montag, den 11. April 2011 um 20:23 Uhr
A. Berger

Hi Erica!

Could you provide a link to the page please, I will have a look at it.

Best regards
Andreas

verlinkung 2
1 Montag, den 04. April 2011 um 15:23 Uhr
ajal

ich habe versucht einen statischen link in zeile 191 einzufügen.


myhtml+=" a href="/web1.html"> img src="'+imges[(b-1)]+" border="0" alt="''/" style="vertical-align:middle;border:0;" /> /a>"; das produziert folgende Fehlermeldung: invalid range in character class. Was mach ich falsch?

verlinkung2
Dienstag, den 05. April 2011 um 09:32 Uhr
ajal

Danke!
muß mich dringend mehr mit der materie beschäftigen (sowohl quotes als auch brackets).

gruß
ajal (nicht Flo)

@Flo
Montag, den 04. April 2011 um 20:30 Uhr
A. Berger

Hallo Flo!

Die Kommentar-Komponente ist für das Posten von Quelltexten nicht wirklich geeignet, weil HTML erlaubt ist und deshalb interpretiert wird. Ich habe daher aus Deinem Kommentar die linken spitzen Klammern entfernt (nur zur Info).

Was Dein Problem angeht: Der String, den Du der Variable myhtml hinzufügst, ist mit doppelten Anführungszeichen begrenzt. Wenn Du also den href des Links mit doppelten Anführungszeichen einschließt, dann unterbricht Du diesen String. Ich würde entsprechend entweder auf einfache Anführungszeichen ausweichen oder aber die doppelten mit einem Backslash escapen.

Gruß
Andreas

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

bretteleben.de

Add to circles

Wer ist online
Wir haben 83 Gäste online