Diese Bilderwand wurde mit Javascipt realisiert. Für diesen Script gab es keine Gesamtvorlage, so dass das Konzept an dieser Stelle für eine weitere Nutzung beschrieben wird.
Eigenschaften der Bilderwand
Es existiert eine änderbare Anzahl verschiedener Bildserien mit je 20 Bildern zu einem Thema.
Die Bilder wechseln nacheinander von einer zur anderen Serie.
Die Stelle der Bilder auf der Wand innerhalb einer Serie ist zufällig.
Auch die Reihenfolge des Wechseln der Bilder ist zufällig.
Die Abfolge ändert sich nach jedem Durchlauf, so dass sich keine Wiederholungen einstellen.
Die Geschwindigkeit des Ablaufes ist einstellbar und wird angezeigt.
Der Bildwechsel kann zu jeder Zeit angehalten werden.
Während der Pause kann mit den Pfeiltasten vor und zurück gegangen werden.
Nach Ende der Pause läuft der Bildwechsel weiter.
Die Überschrift wechselt im Takt der sich aufbauenden Bilderserie.
Die Größe der Bilderwand und die Schriftgröße der Überschrift passt sich der Größe des Browserfensters an.
Schematischer Aufbau der Seite
<html> <head> <style type="text/css"> enthällt CSS-Deklarationen </style> <script type="text/javascript"> globale Variablen Funktionen Bildserien </script> </head> <body> <div id="wand_text"> Überschrift 1 // Überschrift der Bilderwand </div> <div id="zeitbox"> // enthällt die Einstellelemente <ul> <li>Wechsel:</li> <li id="t_dauer">500 ms</li> // Zeit bis zum nächsten Wechsel <li>Pause:</li> <li id="t_pause">5 s</li> // Anzeige der Pausenzeit bei vollständiger Serie <li class="zeit" onclick="zeitsetzen(-150)">kürzer</li> // Tasten für Zeiteinstellung <li class="zeit" onclick="zeitsetzen(150)">länger</li> <li class="zeit" id="weiter" onclick="halt()">Pause</li> // Pausentaste </ul> </div> <div id="wand"> // enthällt die Bilder die beim Seitenaufruf angezeigt werden <ul> <li><a href="#"><img src="Pfad/01.jpg"></a></li> <li><a href="#"><img src="Pfad/02.jpg"></a></li> ... <li><a href="#"><img src="Pfad/20.jpg"></a></li> </ul> <script type="text/javascript"> rotation(); // setzt beim Seitenaufruf einmalig die Animation in Gang </script> <noscript> // wenn Javascript im Browser ausgeschaltet ist <h3>Schalten Sie Javaschript ein, um die Bilderwand in Aktion zu sehen.</h3> </noscript> </body> </html>
Deklararion der Bildserien
Im html-Teil wird die erste Bilderserie in einer Liste untergebracht.
Jede Bildserie ist in einem Vektor mit je 20 Elementen gespeichert.
Hier ist ein Beispiel.
<script type="text/javascript"> var leka = new Array(); leka[0] = new Image(); leka[0].src = "skandinavien/wand/leka/01.jpg"; leka[1] = new Image(); leka[1].src = "skandinavien/wand/leka/02.jpg"; leka[2] = new Image(); leka[2].src = "skandinavien/wand/leka/03.jpg"; leka[3] = new Image(); leka[3].src = "skandinavien/wand/leka/04.jpg"; . . . leka[19] = new Image(); leka[19].src = "skandinavien/wand/leka/20.jpg"; var abisko = new Array(); abisko[0] = new Image(); abisko[0].src = "skandinavien/wand/abisko/01.jpg"; abisko[1] = new Image(); abisko[1].src = "skandinavien/wand/abisko/02.jpg"; . . . abisko[19] = new Image(); abisko[2].src = "skandinavien/wand/abisko/19.jpg"; </script>
Aufbau des Javascrips
Beim Seitenaufruf wird die Funktion rotation() gestartet. Sie ruft dann weitere Funktionen auf.
function rotation() { // wird nach vollständigem Wechsel einer Serie erneut aufgerufen
init(); // Initialisierung der Bilderserien und ...
index = new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20); // Zählindex der Bildwand, auf 0 steht das Logo der Seite
mischen(); // mischt den Vektor index damit die Bilder nicht der Reihe nach wechseln
setCSS(); // passt die Bilderwand an die aktuelle Größe des Browserfensters an
ueberschrift(); // setzt vor jedem Durchgang die Überschrift über der Wand
wechsel(); // wechselt die Bilder einer Serie, ruft sich rekursiv nach jedem Bildwechsel auf
}
Die Funktion mischen()
Diese Funktion mischt die 20 Zahlen, die im global deklarierten Vektor index stehen. Sie gewährleistet, dass
später die Bilder in zufälliger Reihenfolge wechseln. Auch ihr Platz innerhalb der Bilderwand
ist zufällig und ändert sich nach jedem Aufruf. Weiterhin wird gewährleistet, dass keines
der Bilder auf der Wand doppelt zu sehen ist. In der Funktion mischen() wird der Wert jedes Elements
von Index nacheinander mit mit dem Wert eines zufällig bestimmten Elementes vertauscht.
Dabei kannes auch passieren, dass eine Zahl mehrmals vertauscht wird, was egel ist, da
jede Stelle von k=0...19 ein mal vertauscht wird.
function mischen(){
var tmp, rand;
for(var k =0; k < index.length; k++){
rand = Math.floor(Math.random() * index.length);
tmp = index[k];
index[k] = index[rand];
index[rand] =tmp;
}
}
Die Funktion setCSS()Alle Bilder sind stark komprimiert, so dass sie lediglich zirka 12kB groß sind. Sie sollen deshalb nicht weiter vergrößert werden. Daher sind sie in ihren Maßen für eine große Bildschirmauflösung berechnet. Damit bei einer kleineren Bildschirmauflösung kein Srollbalken erscheint, wird die gesamte Darstellung entsprechend berechnet. Es wird von den üblichen Bildschirmauflösungen ausgegangen. Die Anzeige passt dann gerade so in das Browserfenster hinein. Verkleinert sich das Browserfenster etwas, wird die Wand auf die nächst niedrigere Bildschirmauflösung umgeschaltet, so dass die Wand verkleinert und zentriert dargestellt wird.
function setCSS () { // manipuliert die Bilderbreite in Abh. des Browserfensters
var brei = window.innerWidth; // ermittelt Breite des Browserfensters
if (brei<1280){ // nur noch für 1024 px Bildschirmbreite
bildbreite( '155px','116px','28px', '550px', '810', '495'); // gewünschte CSS-Werte als String werden übergeben
return;
}
if (brei>=1280 && brei<1440) {
bildbreite( '207px','155px','36px', '750px', '1065', '650'); // UND-Verknüpfung
return;
}
if (brei>=1440 && brei<1600) {
bildbreite('238px','178px','44px', '850px', '1225', '750'); // UND-Verknüpfung
return;
}
if (brei>= 1600) {
bildbreite( '271px','203px', '55px', '950px', '1385', '840'); // Orginalzustand zurückstellen
return;
}
}
Ist die entsprechende Auflösung ermittelt, wird die Funktion bildbreite() aufgerufen. Ihr werden alle nötigen Änderungsparameter übergeben. Bildbreite() beeinflusst die CSS der Seite.
function bildbreite(b,h,fsize,strich, box_w, box_h){ // passt Bilderwand an Browserfenstergröße an
for (var i = 1; i <= 20; i++) { // Größenänderung für alle Bilder der Wand
document.getElementsByTagName("img")[i].style.width = b;
document.getElementsByTagName("img")[i].style.height = h;
document.getElementsByTagName("li")[i+12].style.width = b; // +12 berücksichtigt frühere li im Dokument
document.getElementsByTagName("li")[i+12].style.height = h;
}
document.all.wand_text.style.fontSize =fsize; // passt Schriftgröße der Überschrift an
document.all.wand_text.style.width =strich; // beeinflusst Stichlänge
document.all.wand.style.width =box_w; // umgebene Box Breite
document.all.wand.style.height =box_h; // umgebene Box Höhe
}
Die Funktion ueberschrift()
Sie benötigt einen zuvor golbal definierten Zählindex. Bei jedem Aufruf wird dieser
inkrimentiert. In einer Fallunterscheidung wird der Text der zu setzenden Überschrift einer Funktion
text()übergeben. Die Variable bildreihe bekommt den Vektor mir der anzuzeigenden Bildserie
zugewiesen. In text() steht nur eine Zeile. Sie ändert den Text in einem html-tag mit dem
der id="wand_text".
z=0;
function ueberschrift(){
z++;
switch (z) {
case 1:
bildreihe = Oland;
text('Öland im Mai');
break;
case 2:
bildreihe = skane;
text('Skåne im Oktober');
break;
.
.
.
case 6:
bildreihe = leka;
text('Sommer auf Leka');
z=0;
break;
}
}
function text(Neu) { // setzt den Text über die Wand
document.all.wand_text.innerHTML = Neu; // Die zu tauschende Schrift muss in einem html-tag namens wand_text stehen
}
Die Funktion wechsel()
Diese Funktion besorgt den Wechsel der Bilder und realisiert die Wartezeiten zwischen
den Wechseln. Ebenfalls wird die Pause/weiter-Funktionalität organisiert.
function wechsel() {
if (i<20) { //ist immer wahr da Zählindex am Bildserienende auf Null gesetzt wird
if(stop==1) // Pausentaste wurde gedrückt
{
window.clearTimeout(rot); // beendet die gerade bestehende Verzögerungszeit
paus = window.setTimeout("wechsel()", 30000); // sehr lange Verzögerung dient als Pause
}
else{
j=index[i]; // ein neuer Index j bekommt den Wert des Elementes i aus dem gemischten Vektor index
document.images[j].src =test[i].src;
i++;
if (i == 20) { //ist wahr wenn alle Bilder einer Serie bereits gewechselt sind
i=0; // der Zällindex wird wieder auf Null gesetzt für neue Bildserie
rot=window.setTimeout("rotation()", t*10); // Nach einer Pausenzeit beginnt eine neue Bildserie in einem neuen Durchlauf
}
else{ // Bildwechsel innerhalb einer Serie
rot=window.setTimeout("wechsel()", t); // rekursiever Aufruf nach eingestellter Verzögerungszeit
}
}
}
}
Die Pausenfunktion des Bildwechsels
Zur Realisierung einer sicher funktionierenden Pausenfunktion musste ich eine ganze Weile
herumexperimentieren. Im Netz gibt es zwar einige wenige Anregungen zu diesem Thema,
doch diese führen meist in nicht mehr beendbare Zustände.
Zählschleifen sind nach meinem Erkenntnisstand nicht zur Realisierung einer Pause
geeignet, da sie den Rechner so beschäftigen, dass sie nicht mehr beendet werden können.
Geeignet ist die window.setTimeoutFunktion. Um sie definiert zu beenden zu können,
muss sie aber in einer Variablen gespeichert werden: Variable = window.setTimeout("wechsel()", t);
Damit kann die laufende Verzögerung mit window.clearTimeout(Variable) abgebrochen werden.
Irgenwo wird anfangs die globale Variable stop auf Null gesetzt.
Der Pausenknopf mit der Schrift Pause steht in einem Listenelement mit der id="weiter".
Mit dem Klick auf den Knopf wird onclick="halt()" aufgerufen.die Funktion halt()
setzt die Zustandsvariable stop. Sie muss jetzt nur noch an geeigneter Stelle ausgewertet werden.
var stop = 0; // globale Variable setzen
function halt(){ // setzt Zustandsvariable stop und die Schrift der Pausentaste
if (stop == 0) { // Pause
stop = 1;
document.all.weiter.innerHTML = 'weiter'; // Die zu tauschende Schrift muss in einem tag mit der id="weiter" stehen
}
else { // weiter
window.clearTimeout(paus); // beendet die laufende Pausenverzögerung
stop = 0;
document.all.weiter.innerHTML = 'stop'; //tauscht Schrift
wechsel();
}
}
Die Pfeiltastenfunktionen
Befindet sich die Imagewand im Pausenstatus, kann mit den Pfeiltasten
manövriert werden. Um dies realisieren zu können, wurde ein Vektor
serien = new Array(leka, Oland,...leka);
eingeführt. Seine Elemente sind die Vektoren, die die Bilderserien enthalten.
Über serien läuft der Index z.
Da sich wechsel() rekursiev aufruft, ist die Funktion nicht geeignet, den manuellen
Wechsel zu organisieren. Es wurden zwei neue Funktionen eingeführt.
Die Indizees i und z werden jetzt mit jeder Pfeiltaste gezählt.
Beim Ende einer Serie werden sie entsprechend neu gesetzt, so
dass der Rückwärtsgang auch über den Anfang hinaus geht.
function manuell_rechts() {
serie = serien[z];
j=index[i];
document.images[j].src =serie[i].src; //+20
i++;
if (i == 20) {
i=0;
if (z==7) z=1;
else z++;
}
}
function manuell_links() { // Linkspfeil
serie = serien[z-1];
i=i-1;
j=index[i];
document.images[j].src =serie[i].src; //+20
if (i == 0){
i=19;
z=z-1;
if (z==0) z=7;
}
}