Impressum  |   Kontakt  |   lekaslauf  |   Sitemap  |   Links
Kunst aus Rostock
Imagewand Scriptinfos

Imagewand Scriptinfos

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;
		}
}

zurück zu Skandinavien
nach oben
Impressum  |   Kontakt  |   lekaslauf  |   Sitemap  |   Links
[Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ] [Alt + ]