Menu
 

 

SSI - Bildergalerie ohne Arbeit

Bildergalerien finden sich auf den meisten privaten Websites. So kann die liebe Verwandtschaft die Entwicklung der Kleinen verfolgen oder die Freunde die gerade aktuelle Lebensgefährtin begutachten. Der Bau einer solchen Galerie muss dank SSI kein großer Aufwand sein.

Thumbnails sind kleine Vorschaubilder. Auf Klick öffnet sich das Bild in der normalen Größe, oft in einem neuen Fenster. Dies hat den Vorteil, dass der Besucher nicht endlos warten muss, bis alle Bilder in höchster Auflösung geladen sind - denn nicht alle Bilder interessieren ihn wirklich.

Wenn die Seite im PopUp nicht nur aus dem eigentlichen Bild besteht, sondern auch ein Hintergrundbild oder Buttons zum schließen hat, wird es kompliziert: Für jedes Bild muss eine eigene Seite erstellt werden, wenn nicht unser Javascript genommen wird.

Die Datei oeffner.html wird mit einem Javascript-PopUp geöffnet. Die Adresse des Bildes wird mit einem Fragezeichen übergeben: oeffner.html?baumschule.jpg lädt also das Bild baumschule.jpg. Unsere Datei oeffner.html geht davon aus, dass dieses Bild im Ordner bilder/ vorliegt.

   
Vorführeffekt: Der Bilderöffner in Aktion

 

Die Datei oeffner.shtml sieht so aus:

<HTML>
<BODY BACKGROUND="bilder/hintergrund.gif" onload="self.focus()">
<A HREF="#" onClick="window.close();return false"><IMG
SRC="bilder/<!--#echo var="QUERY_STRING" -->" BORDER=0></A>
</BODY></HTML>

Die onload-Funktion bringt das Fenster automatisch in den Vordergrund. Bei Klick auf das Bild wird das Fenster auch automatisch geschlossen, dies bewirkt der Zusatz onClick="window.close();return false" in dem Link.

Die wichtige SSI-Zeile ist direkt in dem <IMG> tag: <!--#echo var="QUERY_STRING" -->. Dadurch wird der Bildname, der per Fragezeichen übergeben wurde, direkt in das <IMG> tag geschrieben.

 

  
   Anzeigen

Navigation:    Webdesign - Programmierung - Web Grafiken - Software Guides - Tools - Templates - Schriftarten - Seminare - IT News
Partner:   Template OK - PCopen - SITEopen - PCopen Schweiz - HTMLopen Schweiz - VirtualUniversity.ch - WEB-SET.com - YesMMS - Job und Karriere