Diashow

Ein Diashow ist eine elegante Möglichkeit deine Bilder und Screenshots zu präsentieren. Bevor du anfängst brauchst du eine Liste von Bilddatein die du präsentieren willst. Diese Liste braucht das Script und wird am besten als Array angelegt.

<script type="text/javascript">
var imgs=new Array("imgs/bild1.png","imgs/urlaub.jpg","imgs/cool.gif");
</script>
		

In diesem Script habe ich angenommen dass deine Bilder im Unterordner imgs liegen. Beachte auch dass du nur relative Pfade verwendest, keine absoluten Pfade so wie die Bilder auf deiner Festplatte liegen. Also imgs/bild1.png statt dem lokalen C:\Eigene Datein\fritz\Homepage\Script\imgs. Diesen Pfad gibt es auf dem Webserver später nicht.

Als nächstest brauchst du ein Grundgerüst für deine Diashow. Das sind eine img Tag und 2 Links, einen zum Vorblättern und einen Zurück.

<img src="default.png" id="img1"/> <br/>
<a href="#">Zurück</a>
<a href="#">Vor</a>
		

Um in der Diashow blättern zu können brauchst du eine Variable die den aktuellen Index im Array der Bilderquellen speichert. Der Vor Link wird den Index um 1 erhöhen und der Zurück Link um 1 erniedrigen. Damit der Index nicht negativ wird oder grösser als die Anzahl der Bilder musst du ihn noch Modulo der Anzahl nehmen.

Zur Realisierung reicht eine Funktion die als Parameter einen boolsche Wert (true/false) nimmt. Ist der Wert true soll der Index um 1 erhöht werden andernfalls um 1 erniedrigt. Damit die Änderung sichtbar wird musst du dem img Element noch die neue Bildquelle zuweisen.

<script type="text/javascript">
var idx=0;
var imgs=new Array("imgs/bild1.png","imgs/urlaub.jpg","imgs/cool.gif");

function show(next)
{
  if(next) idx=(idx+1)%imgs.length;
  else idx=(idx-1)%imgs.length;

  document.getElementById('img1').src=imgs[idx];
}
</script>
		

Jetzt musst du nur mehr die Funktion aus den beiden Links aufrufen.

<img src="default.png" id="img1"/> <br/>
<a href="#" onClick="show(false);">Zurück</a>
<a href="#" onClick="show(true);">Vor</a>
		

Zurück

---

This work is licensed under a Creative Commons Attribution-ShareAlike 2.0 Austria License.

Impressum