Dia MagicImage Show

Scripte > Bildergalerien

Dia Bilder Show mit und ohne Zufallsgenerator

Diese Magic Show zeigt jeweils ein Bild zusammen mit den zugehörigen Links (d. h. jedes Bild kann unterschiedliche Ziellinks haben) in vordefinierten Zeitintervallen an. Im Javascript kann aber auch ein Zufallsgenerator aktiviert werden, um eine zufällige Anzeigereihenfolge zu erzeugen. Das Scipt ist auf das Minimalste begrenzt und benötigt keine CSS-Datei. Die Anzahl und Größe der zuzeigenden Bilder, die Anzeigeintervalle und vieles mehr können selbst bestimmt werden. Dazu muss der Code nur im Javascript entsprechend angepasst werden.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Festgelegte Reihenfolge:

(magicimage.js)

// Bildfolge gemäß 'var ImageLoad ='

if(ImageIndex == ImageCount - 1) {

ImageIndex= 0;

} else {

ImageIndex++;

}

if(FirstLoad == 0) {

{SlowFinish();}

}

Mit Zufallsgenerator:

(magicimage.js)

// Bildfolge gemäß 'Zufall'

ImageIndex = Math.floor(Math.random()*ImageCount);

if(FirstLoad == 0) {

SlowFinish();

}

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="MagicImage"></div>
</td>
</tr>
</table>
<p> </p>

</div>

Nach dem <BODY> Tag

Code Datei "magicimage.js"

var ImageLoad =

[

// ['URL zur verlinkten Seite', 'Pfad zum Image, 'Untere Beschriftung des Images'']
['wsX5Obj/Obj135_0/img/natur_01.jpg', 'wsX5Obj/Obj135_0/img/natur_01.jpg', 'Natur Image 1'],
['wsX5Obj/Obj135_0/img/natur_02.jpg', 'wsX5Obj/Obj135_0/img/natur_02.jpg', 'Natur Image 2'],
['wsX5Obj/Obj135_0/img/natur_03.jpg', 'wsX5Obj/Obj135_0/img/natur_03.jpg', 'Natur Image 3'],
['wsX5Obj/Obj135_0/img/natur_04.jpg', 'wsX5Obj/Obj135_0/img/natur_04.jpg', 'Natur Image 4'],
['wsX5Obj/Obj135_0/img/natur_05.jpg', 'wsX5Obj/Obj135_0/img/natur_05.jpg', 'Natur Image 5'],
['wsX5Obj/Obj135_0/img/natur_06.jpg', 'wsX5Obj/Obj135_0/img/natur_06.jpg', 'Natur Image 6'] // KEIN Komma dahinter

];

var ImageCount = 6; // Gesamtzahl der oben geladenen Bilder

var ImageDelay = 5000; // Verzögerungsintervall in sec., 5000 = 5 Sekunden

var LinkTarget = "_self" // Definiert, wo die verlinkte Seite geöffnet werden, _self, _blank, _top

var ImageIndex = 0; // Nicht ändern

var FirstLoad = 0; // Nicht ändern

var QuickStartID = 0; // Nicht ändern

var htmlString = "" // Nicht ändern

var randomnumber = 0; // Nicht ändern

function ImageChange() {

htmlString = '<center>';
htmlString = htmlString + '<font face="Verdana" size="3">'; // Schriftart und Schriftgröße für Bildunterschriften
htmlString = htmlString +'<a target="';
htmlString = htmlString + LinkTarget;
htmlString = htmlString + '" href="';
htmlString = htmlString + ImageLoad[ImageIndex][0];
htmlString = htmlString + '"><img border="0" src="'; // Größe des Bildrandes kann hier geändert werden
htmlString = htmlString + ImageLoad[ImageIndex][1];
htmlString = htmlString + '"></a><br>';
htmlString = htmlString + ImageLoad[ImageIndex][2];
htmlString = htmlString + '</font>';
htmlString = htmlString + '</center>';
document.getElementById('MagicImage').innerHTML = htmlString;
// Bildfolge gemäß 'var ImageLoad ='
if(ImageIndex == ImageCount - 1) {
ImageIndex= 0;
} else {
ImageIndex++;
}
if(FirstLoad == 0) {
{SlowFinish();}
}
// Bildfolge gemäß 'Zufall' (dann oberen Bereich deaktivieren und unteres aktivieren)
/*
ImageIndex = Math.floor(Math.random()*ImageCount);
if(FirstLoad == 0) {
SlowFinish();
}
*/

}

function QuickStart() {

QuickStartID=setInterval("ImageChange()", 1000);

}

function SlowFinish() {

clearInterval(QuickStartID);
FirstLoad = 1;
setInterval("ImageChange()", ImageDelay);

}

QuickStart()

» nach oben «