Home Javascript Slideshow
Javascript: slideshow
Written by Andreas Berger   
Saturday, 19 April 2008 07:47

bretteleben.de JavaScript Slideshow - Updated 20100412!

A simple slideshow-script, started onload or by link, the transition is fading, once started, the script runs nonstop.

Display

The script shows the given images in the selected DIV-container. It is started either automatically on page load or by the click on optional control-elements. On page load the script replaces the contents of the given DIV-container which gives you the opportunity to integrate a static picture or a notice (like: the slideshow requires JavaScript) thus providing a fallback for visitors with JavaScript disabled.

Functionality

The script works thinkable easy. The given pictures lie one upon the other in a DIV-container. The "one upon the other" is realized by the use of the z-index. Whilst sliding through the pictures the topmost picture is faded out and then - as in a pack of cards - put to the bottom of the deck. That´s all.

Installation and Configuration:

The integration into the webpage and the configuration of the parameteres is illustrated in detail on the following three sample pages:

Slideshow Sample 01 - just one slideshow, standard configuration
Slideshow Sample 02 - different pages with one slideshow each, one scriptfile
Slideshow Sample 03 - multiple slideshows one one page, one scriptfile
Notice: The Samples are built on top of each other.

Demo

Sample of two slideshows on one page (shown inside an inline-frame):

Compatibility

Notice: Internet Explorer refuses to center smaller images vertically, other browsers do it.

License

The script is licensed under the GNU Public License (www.gnu.org/copyleft/gpl.html).

update Version: 20100412

Version 20100412

- solves the problem that Internet Explorer shows white spots on black (#000) part of the image

Version 20090406

- fixes an error, caused by an undeclared variable when having activated "shuffle"

Version 20090301

- rewrite based on the corresponding Joomla-plugin
- multiple slideshows on one page
- multiple slideshows on different pages using one scriptfile
- optional control elements
- optional shuffle

Version 20081101

- absolute positioning is no more required
- License for further Releases GNU/GPL

Version 20080502

Miscellaneous

I am happy about everybody who gives me a link back to www.bretteleben.de on his website, this way helping me to popularize the script. The JavaScript "bretteleben.de JavaScript Slideshow" is till now listed in different JavaScript - resources, including the largest - as far as i know - JavaScript resource: HotScripts.

If you have questions or suggestions about this JavaScript, please use the comment-function. Records about the behavior of this script with further browsers/operating systems would be appreciated.

Download

The ZIP-archive contains a demo-page. By downloading it you agree to the terms of the GNU Public License.

Downloads:
FileLast Modified
Download this file (bretteleben.de.slideshow.20100412.zip) bretteleben.de.slideshow.20100412.zip2010-04-12
Last Updated on Monday, 12 April 2010 21:23
 
Comments (30)
Skript funktioniert nicht in Firefox 12 (mac)
30 Wednesday, 25 April 2012 17:51
Christian Oberbauer

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

@Christian Oberbauer
Wednesday, 25 April 2012 20:16
A. Berger

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

Bilderverlinken ....
29 Wednesday, 25 April 2012 16:28
N.Mayer

Hi,

wäre es noch möglich den einzelnen Bildern in der Slideshow entsprechende Links zuzuweisen ?

@N.Mayer
Wednesday, 25 April 2012 19:44
A. Berger

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

Übergänge beim manuellen umschalten einbauen
28 Tuesday, 24 April 2012 15:12
Adam N.

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

@Adam N.
Tuesday, 24 April 2012 20:19
A. Berger

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

Pause?
27 Saturday, 21 April 2012 04:39
Barbara Boll

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

@Barbara Boll
Sunday, 22 April 2012 09:39
A. Berger

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

Z-Index
26 Friday, 20 April 2012 21:24
bernhard

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.

@bernhard
Friday, 20 April 2012 22:17
A. Berger

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

slideshow sichtbarkeitsproblem
25 Friday, 20 April 2012 21:11
burni

Hat jemand eine Idee warum sich die Slideshow nicht via layer div ausblenden lässt. egal was ich mache sie liegt immer im vordergrund.

Super script........vieeeeelllllleeeeennnnn DANK!
24 Sunday, 15 April 2012 13:40
Andreas T.

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.

slideshow
23 Thursday, 01 March 2012 21:00
Beat Rüedi

soeben eingebaut (ruka.ch/wir) - herzlichen dank

Hilfe, Meine Slideshow schläft ein :-(((
22 Saturday, 07 January 2012 12:38
tommy

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

@tommy
Wednesday, 11 January 2012 13:34
A. Berger

Hallo Tommy!


Naja, Du könntest den Wert, den Du beim Parameter var def_steps gesetzt hast reduzieren. Das vermindert die Prozessorlast.

Gruß
Andreas


 

Verzeichnis lesen
21 Tuesday, 06 December 2011 12:58
Havoc

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

@Havoc
Tuesday, 06 December 2011 22:15
A. Berger

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

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

bretteleben.de

Add to circles

Who's Online
We have 15 guests online