| 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. DisplayThe 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. FunctionalityThe 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: DemoSample of two slideshows on one page (shown inside an inline-frame): CompatibilityNotice: Internet Explorer refuses to center smaller images vertically, other browsers do it. LicenseThe script is licensed under the GNU Public License (www.gnu.org/copyleft/gpl.html). update Version: 20100412Version 20100412 MiscellaneousI 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. DownloadThe ZIP-archive contains a demo-page. By downloading it you agree to the terms of the GNU Public License.
|
||||
| Last Updated on Monday, 12 April 2010 21:23 |
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