 Fotoshow 02
Eine automatisch gesteuerte Fotoshow mit (wahlweiser) Zufallsanzeige. Die Auto-Blättern-Funktion für Bilder und Fotos zeigt außerdem
zwei Texte zum jeweiligen Foto an.
Ein Anwendungsbeispiel ihre Fotos im Netz zu präsentieren. Ändern sie dazu die Bild- und Textboxmaße. Außerdem wäre dieses Beispiel geeignet, Text- und Bildhinweise in einer mehrspaltigen Webseite am Rand anzuzeigen. Genau diese Variante hab ich zur Demo meines Beispiels hier gewählt.
Foto + 2 Texte mit Auto-Blättern-Funktion
Die Zufallsbildfunktion (optional) ist hier eingeschaltet!
Aufwand
- Script in den Head-Bereich kopieren
- Anzahl der Fotos eintragen
- Bildquellen und Beschreibungstexte eintragen
- Bildblock-Anweisungen in den Body-Bereich notieren
- Scriptstart im Body-Bereich eintragen
Vorgaben
- Bildgröße für dieses Beispiel: 106 x 277
- (4 Testfotos ebenfalls im Download enthalten)
- Schriftformatiereung mit CSS
- optionale Zufallsfunktion für das 1. Foto
Das Beispiel mit sämtlichen Dateien können sie als ZIP-Datei herunterladen (ca. 34 kB).
|
|
Variablen im Script
| Variable |
Inhalt hier |
Zweck |
| var Anzahl |
5 |
Anzahl der Bilder |
| var zufall |
"ja" |
1. Bild zufällig ja / nein |
| var Wartezeit |
4000 |
Eintrag in Millisekunden |
Die Zufallsfunktion für die Anzeige des 1. Fotos können sie an- oder abwählen, indem sie der Variablen 'zufall' dem Wert 'ja' oder 'nein' zuweisen.
Die CSS-Formatierungen als Inline-Anweisung
overflow:hidden;
text-align:center;
font-family:Arial,Helvetica;
font-size:11px;
color:#2F2F2F;
background-color:#FFFFFF;
width:106px;
border:0px solid #FFFFFF;
height:46px;
Das sind die CSS-Anweisungen für die beiden Textbereiche (textareas). Bitte wundern sie sich nicht über die eigenwilligen Angaben für den Rand.
 Für den Firefox sollten sie unbedingt die Höhe der 'textarea' genau definieren. Hier wurde die Höhe (angepasst an die Zeilenanzahl (rowspan) und die Schrifthöhe auf 46 Pixel festgelegt.
Nachteil dieses Beispiels
Die Fotos müssen in identischen Bildgrößen vorliegen. Andersformatige Fotos müssen durch eine Fotomontage / Bildbearbeitung auf dieses Maß gebracht werden.
Erklärung
Innerhalb eines HTML-Formulars sind zwei Textbereiche als 'textarea' definiert. Zwischen diesen Textbereichen wurde die Grafik notiert. Dies 3 Seitenelemente bekamen eine ID mit deren Hilfe man die Elemente ansprechen kann, um Änderungen anzuweisen.
Für die Textbereiche sind 3 Textzeilen festgelegt. Die Textbereiche wurden an Ort und Stelle mit CSS-Anweisungen formatiert: Breite, Textformatierung, Hintergrundfarbe und Rand (unsichtbar).
Die Informationen für den Bild- und Textwechsel sind innerhalb des Scripts eingetragen. 3 Informationen für jede Anzeige: Die URL für das Bild und 2 Informationen für die beiden Texte.
Abhängig von der Verzögerungszeit werden die jeweiligen Infos den 3 Seitenelementen zugeordnet und getauscht. Eine Prüfung veranlast nach Erreichen der letzten Informationen in der Liste der Eintragungen, dass die Anzeige wieder bei 1 beginnt.
Ist die Zufallsfunktion ausgewählt, wird das erste Bild mit den beiden zugehörigen Texten zufällig ausgewählt. Ansonsten startet die Funktion bei Bild 1. Wegen dieser Zufallsoption, ist im Dokument an der Stelle der Bildanzeige lediglich ein (transpareter) Platzhalter notiert. So wird ein kurzes 'aufblitzen' des dort normalerweise eingebunden Bildes bei der Zufallsoption vermieden.
Tipp:
Möchten sie in den Texten einen Zeilenumbruch erzwingen, können sie nicht das übliche <br> eintragen. Innerhalb von JavaScripts wird ein Zeilenumbuch im Text (falls erwünscht) mit \n notiert.
Dieses Beispiel habe ich aus 'Fotoshow01' weiter entwickelt. Die Buttons sind wegen der automatischen Blättern-Funktion nicht notwendig. Ein zweiter Textbereich wurde hinzugefügt. Die Textbereiche sind nun mehrzeilig. Eine Zeitfunktion für die verzögerte Schaltfunktion wurde hinzugefügt.
|
HOME
Quellcode 
Download 
ZURÜCK