 Slide-Show 02-C (Start- + Stopbuttons)
Manuell gestarteter Bildwechsel für Grafiken und Fotos mit identischer Bildgröße. Die Slideshow muss per Mausklick gestartet und jederzeit angehalten werden. Die Zeit für die Anzeige können sie im Script festlegen.
|
|
» Automatischer Bildwechsel mit Start-Funktion «
UPDATE 19.09.2008 14:00 Uhr, Statusanzeige der Buttons, Anzeige aktuelle Billdnummer
automatischer Bildwechsel - Version 02-C
Sequentielle Anzeige von Grafiken mit voreingestellter Anzeigezeit. Die Slideshow muss manuell gestartet, kann aber jderezeit angehalten und später fortgesetzt werden. Zur Zeit ist eine Anzeige von maximal 9 Grafiken vorgesehen. Ich werde das Beispiel demnächst für eine Anzeige bis max. 999 Bilder erweitern.
Dieses Beispiel können sie als ZIP-Datei herunterladen.
- automatisches Blättern / Diashow mit Start- Stop-Funktion
- Anzeige der aktuellen Bildnummer
- Änderung der Button-Beschriftung situationsabhängig
- einstellbare Zeit für die Anzeigeintervalle
- die Slide-Show startet erst auf 'Knopfdruck'
- (zur Zeit noch) für maximal 9 Grafiken
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
Ein Script von 'ShuvoRim' habe ich modifiziert. Das ursprüngliche Script war nur anwendbar, wenn das zu tauschende Image das erste Image der HTML-Seite war. Der Bezug auf das zu tauschende Bild wurde mit dem Befehl
document.images[0].src = img[counter].src;
hergestellt. Das funktioniert aber nur, wenn das 'Tauschbild' das Image Nr. 1 (für JavaScript das Image mit der Indexnummer 0) ist. Für einen HTML-Änfänger war das Sript in dieser Form unbrauchbar.
Steht das Image nicht an erster Stelle, müsste man die Anzahl der vorangestellten Images ermitteln und diesen Wert (minus 1) im Script eintragen. Das wäre natürlich auch auf jeder Seite ein unterschiedlicher Wert, die Arbeit fehlerträchtig und mühsam.
 originales Script im Window öffnen
|
Meine Modifikationen
- Ich vergebe nun eine ID für das auszutauschende Image (id="Bild01") und spreche im Script für den Bildtausch das Image mit der ID an ...
document.getElementById("Bild01")
... und vereinfache so die Anwendung.
- Variante mit Autostart, Variante mit festem Verzögerungswert
- Formatierung der Formularbuttons mittels CSS (nicht für NS4.x)
- in eingen Beispielen mehr als 9 Grafiken erlaubt
- die Anzeige der aktuellen Bildnummer vorgesehen
- die Button-Beschriftung situationsabhängig gemacht
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/aufnahme00 |
Wert Text |
| Dateityp |
dateiendung |
jpg |
Dateiklasse |
| Anzahl der Grafiken |
anzahl_bilder |
9 |
Wert als Zahl |
| Anzeigezeit |
delayTime |
2000 |
Wert in ms |
|
Beispiel Bildquelle eintragen:
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 (siehe Menü)
Diese Slide-Show gibts in unterschiedlichen Varianten:
|
Home
Beispiel 
Download 
ZURÜCK 