Diashow - Präsentation einer Galerie mittels JavaScriptDieses von mir entwickelte JavaScript zur Präsentation von Galerien können Sie frei verwenden, sofern Sie den Kommentar mit dieser Seitenadresse nicht entfernen und somit auch Anderen die Nutzung vereinfachen.
Als Alternative zu serverseitigen Lösungen spart es auch noch ein wenig Traffic ein, da nur die Bilder und keine kompletten HTML-Seiten übertragen werden müssen. Bei deaktiviertem JavaScript werden Ihre Bilder ohne diese Diashow dennoch angezeigt.
Sie können dieses Script in meiner Thassos-Galerie in Funktion sehen.
Für Besucher ohne JavaScript wäre die Kombination mit einer serverseitigen Alternative freilich optimal. Deaktivieren Sie Javascript auf meinen Fotoseiten und Sie können meine wesentlich komfortabler einzubindene PHP-Version (die ich demnächst mit einigen erweiterten Funktionen auch veröffentlichen werde) in Aktion sehen.
// diashow.js (c) 2005 Ingo Turski - http://www.1ngo.de/web/diashow.html
var Galerie=self.location.href, vor, BildNr, nach, Startbild, Bilder;
var d=1, s=60, l=new Array(7);
function initDiashow(vor,Startbild,nach,Bilder) {
if(document.getElementById) {
var x = Galerie.lastIndexOf(".");
var dia = Galerie.substring(0,x) + "-dia" + Galerie.slice(x);
var Dias = document.getElementById("Dias");
var a = Dias.getElementsByTagName("a");
for (var i=0; i<a.length; i++) {
a[i].href = dia +"?"+encodeURIComponent(vor) +","+parseInt(Startbild+i);
a[i].href +=","+nach +","+Startbild +","+Bilder;
}
}
}
function initDia() {
var Param = self.location.search;
if(Param) {
var P1 = Param.indexOf(",",0); vor = decodeURIComponent(Param.slice(1,P1));
var P2 = Param.indexOf(",",P1+1); BildNr = parseInt(Param.slice(P1+1,P2));
var P3 = Param.indexOf(",",P2+1); nach = Param.slice(P2+1,P3);
var P4 = Param.indexOf(",",P3+1); Startbild = parseInt(Param.slice(P3+1,P4));
Bilder = parseInt(Param.slice(P4+1));
}
var x = Galerie.indexOf("?"); if(x != -1) Galerie = Galerie.substr(0,x);
x = Galerie.lastIndexOf(".");
Galerie = Galerie.substring(0,x-4) + Galerie.slice(x);
document.getElementById("Galerie").href = Galerie;
if(!Param || !Bilder) {
alert("Fehlerhafte Parameter!\n Rufen Sie ein Bild aus der Galerie auf.");
window.location.href = Galerie;
}
else {
l = document.getElementById("Intervall").getElementsByTagName("a");
l[6].style.borderColor = "red"; l[6].style.color = "#39c";
aktiv = window.setInterval("blaettern(1)",s*1000);
document.getElementById("Dia").src = BildName(BildNr);
if(window.opera) window.setInterval('document.getElementById("Dia").src = BildName(BildNr)',2000);
}
}
function BildName(BildNr) {
var Info = document.getElementsByTagName("var")[0].firstChild;
Info.data = "Bild "+BildNr+"/"+Bilder;
var nr = ("0"+BildNr.toString()).substr(BildNr>9);
return(vor+nr+nach);
}
function blaettern(d) {
if (s < 75) clearInterval(aktiv);
BildNr = BildNr + d;
if (BildNr > Bilder) BildNr = Startbild;
if (BildNr < Startbild) BildNr = Bilder;
document.getElementById("Dia").src = BildName(BildNr);
if (s < 75) aktiv = window.setInterval("blaettern(1)",s*1000);
}
function Diashow(d) {
var p = (s<30) ? s/5-1 : 2+s/15;
l[p].style.borderColor = ""; l[p].style.color = "";
s = d;
p = (s<30) ? s/5-1 : 2+s/15;
l[p].style.borderColor = "red"; l[p].style.color = "#39c"; l[p].blur();
if (s == 75) clearInterval(aktiv);
else blaettern(1);
}
Das Script wird in diesem Beispiel als ausgelagerte JavaScript-Datei unter dem Namen "diashow.js" einfach im selben Verzeichnis wie die übrigen Dateien gespeichert. Es erfordert zwei HTML-Seiten, eine Galerieseite mit den Thumbnails und eine Anzeigeseite für die Originalbilder; dies ermöglicht Ihnen, das Design außerhalb des Scripts beliebig festzulegen.
In der Galerieseite müssen folgende Angaben enthalten sein:
<html><head>
...
<script type="text/javascript" src="diashow.js"></script></head>
<body onload="initDiashow('BildName-',1,'.jpg',3)">
...
<div id="Dias">
<a href="BildName-01.jpg"><img src="Thumbnail-01.jpg" alt="" /></a>
<a href="BildName-02.jpg"><img src="Thumbnail-02.jpg" alt="" /></a>
<a href="BildName-03.jpg"><img src="Thumbnail-03.jpg" alt="" /></a>
</div>
...
<p id="Copyright"><a href="http://www.1ngo.de/web/diashow.html">
Diashow-Script © Ingo Turski</a></p></body></html>
Sie müssen Ihre Bilder fortlaufend numerieren, wobei einstellige Zahlen mit führender "0" erwartet werden. Für "BildName-" geben den Namenteil (ggfls. mit Pfad) der Bilder vor der Nummer und mit ".jpg" den Namenteil nach der Nummer an. Wenn die Bilder nicht mit führenden Nullen benannt sind, tragen Sie in der Funktion BildName():
var nr = ("0"+BildNr.toString()).substr(BildNr>9);
ein oder für dreistellige Nummern mit führenden Nullen:
var nr = ("00"+BildNr.toString()).substr((BildNr>9)+(BildNr>99));
- was bei der Verteilung vieler Bilder auf mehrere Galerieseiten der Fall sein könnte und wozu dann im Scriptaufruf außerdem die Nummer des ersten und letzten Bildes (hier "1" und "3") anzugeben ist.
Bei der Initialisierung werden die Links zu den Originalbildern durch Aufrufe der zweiten HTML-Seite mit entsprechenden Parametern ersetzt. Diese Anzeigeseite muß wie die Galerieseite, mit angehängtem "-dia", benannt und im selben Verzeichnis gespeichert werden (z.B. /galerie.html -> /galerie-dia.html) und folgenden Quelltext enthalten:
<html><head>
...
<style type="text/css">
#Intervall a { border:1px solid #eee; background:#eee;}</style>
<script type="text/javascript" src="diashow.js"></script></head>
<body onload="initDia()">
<h1>Überschrift (<var>Bild</var>)</h1>
<p><a id="Galerie" href="#">
<img id="Dia" src="platzhalter.gif" alt="" title="zur Galerie" /></a></p>
<p>[ <a href="JavaScript:blaettern(-1)">voriges Bild</a> |
<a href="JavaScript:blaettern(+1)">nächstes Bild</a> ]
<span id="Intervall">
[ Bildwechsel: alle <a href="JavaScript:Diashow(5)">5</a>,
<a href="JavaScript:Diashow(10)">10</a>,
<a href="JavaScript:Diashow(15)">15</a>,
<a href="JavaScript:Diashow(20)">20</a>,
<a href="JavaScript:Diashow(30)">30</a>,
<a href="JavaScript:Diashow(45)">45</a>,
<a href="JavaScript:Diashow(60)">60</a> Sekunden |
<a href="JavaScript:Diashow(75)">aus</a> ]</span>
</p></body></html>
Die hier fett gedruckten Teile werden exakt exakt so vom Script erwartet und dürfen nicht geändert werden. Bei den übigen Angaben sollten Sie lediglich dafür sorgen, daß src="platzhalter.gif" eine vorhandene kleine Grafik für die Ladezeit des ersten Bildes referenziert. Im var-Element ersetzt das Script den (beliebigen) Inhalt durch die Bildnummern zur Information, der Link mit der id="Galerie" wird automatisch auf die Galerieseite gesetzt und das Platzhalterbild mit der id="Dia" wird durch die ausgewählten Bilder ersetzt. Über die Links mit den JavaScript-Aufrufen kann manuell weitergeblättert sowie der automatische Bildwechsel gesteuert werden, wobei 75 diese Funktion deaktiviert und die anderen Werte den Intervall festlegen; die aktuelle Einstellung wird vom Script hervorgehoben.
Bei der Gestaltung dieser Seite können Sie auch gerne meine Fotoseiten als Vorlage und meine 
Pfeilgrafiken
oder ← (← | →) → zum Blättern verwenden.