Slide-Show 02-C
    


WWW.WEB-TOOLBOX.NET

Beispiel  Quellcode   Pictures ZIP  ZURÜCK SITEMAP  

 Slide-Show 02-C   (Start- + Stopbuttons)

Manuell gestarteter Bildwechsel für Grafiken und Fotos mit identischer Bildgröße. Die Slideshow kann per Mausklick gestartet und angehalten werden. Die Zeit für die Anzeige können sie im Script festlegen.

   automatischer Bildwechsel - Version 02-C

  • automatisches Blättern / Diashow mit Start- Stop-Funktion
  • einstellbare Zeit für die Anzeigeintervalle
  • die Slide-Show startet erst auf 'Knopfdruck'
  • (zur Zeit noch) für maximal 9 Grafiken


Sportarten beim Tus06 Übach-Palenberg




Hier habe ich gemogelt und gegen die Regeln verstoßen. Die angezeigten Images sind in Wirklichkeit 350 x 350 px groß werden aber nur in den Maßen 140 x 140 Pixel angezeigt. Da sie aber lediglich 5 kB groß sind und für die Beispielansichten ohnehin in dem Großformat benötigt werden, erspare ich das erneute Laden vom Server.


  Voraussetzungen für die Funktion des Beispiels

  • Die Grafiken haben die gleichen Abmessungen (Breite + Höhe),
  • sie sind alle im gleichen Verzeichnis abgelegt,
  • haben identische Dateinamen mit fortlaufender Nummer am Ende
Beispiele: pic1.gif, pic2.gif, pic3.gif, ...  |  Foto1.jpg, Foto2.jpg, Foto3.jpg, ...


Als Basis für dieses Beispiel diente ein Script von 'ShuvoRim'.

 Meine Modifikationen - Info einblenden / ausblenden



  So können sie das Beispiel anpassen

Zur Anpassung folgende Änderungen im Script:

Beschreibung Variable    hier im Beispiel   ersetzen mit  
Pfad + erster Teil der URL datenquelle ../images/Foto Wert Text 
Dateityp dateiendung jpg Dateiklasse 
Anzahl der Grafiken anzahl_bilder 6 Wert als Zahl 
Anzeigezeit delayTime 2000 Wert in ms


  Hier ein Beispiel - So wird die Bildquelle eingetragen:

Beispiel:

Die verwendeten Images pic1.gif, pic2.gif, pic3.gif, ..., sind im Unterordner 'images' abgelegt. Die vollständige URI für das erste Bild ist demzufolge:

images/pic1.gif

Da die fortlaufende Nummer (eine Ziffer) vom JavaScript eingetragen wird, müssen sie lediglich den hier farbigen Teil der URI notieren.

Beschreibung Variable    hier im Beispiel   ersetzen mit  
Teil 1 der URI datenquelle images/pic Pfad + erster Teil des Dateinamens
Teil 2 der URI dateiendung .gif Punkt + letzter Teil des Dateinamens


Der Variablen 'datenquelle' wird der erste Teil der URI ohne die einstellige Zahl, Punkt und Dateiendung zugeordnet. Tragen sie unbedingt die für sie zutreffende Informationen zur Datenquelle für die eingebundenen Bilder ein!




   Übersicht der Varianten

Diese Slide-Show gibts in unterschiedlichen Varianten:

Version 2-A   autoStart, Start- + Stopbuttons  Beispiel 
Version 2-B   autoStart, keine Buttons Beispiel 
Version 2-C   manueller Start, Anhalten- + Weiter-Buttons Beispiel 





NACH OBEN