Diese Scripten und Dateien koennen frei und nach Belieben geaendert werden. Die Weitergabe darf jedoch nur in unveraenderter Form und unentgeltlich erfolgen.

Fragen und Anmerkungen bitte an Guzzy - guzzy@bigfoot.de

Ueber einen Besuch auf unserer MoGu - Homepage

MoGu - Denkspiele-, Knobel-, Chat- und Baby - Homepage

wuerden wir uns sehr freuen.

Zurueck

Scripten für ein Fotoalbum

Neulich bin ich auf die Idee gekommen, dass man unsere ganzen Fotos, die sich im Laufe der Jahre angesammelt haben, irgendwie im Webstyle anzeigen muesse :)

Und zwar habe ich mir das so vorgestellt, dass zunaechst eine Uebersicht eines 
jeden Films auf einer Seite angezeigt wird und wenn man nun eines der IndexBilder anklickt, so soll das entsprechende Bild in einem neuen Fenster gross angezeigt werden.

Mit "normalem" HTML wuerde das heissen, dass ich fuer jeden Film eine Seite basteln muss und dann fuer jedes Bild wieder eine HTML-Seite... das waeren dann einige tausend HTML-Dateien, die alle angepasst werden muessten 8-o

Nach ersten Gehversuchen in JavaScript war ich so ermutigt, dass ich beschloss, das ganze mittels JavaScript etwas zu vereinfachen. Hier nun die Bedienungsanleitung des Ergebnisses (am Ende befindet sich eine Kurzanleitung fuer die Eiligen):

Bedienung

Die hier beschriebene Bedienung bezieht sich stets auf eine IndexBild-Anzeige. Im Beispiel hier ist das die Datei "Serie_1.htm".

Konventionen: Bilder, das sind die Bilddokuente, die letztendlich dem Besucher 
angezeigt werden sollen. Indexbilder sind Bilddokumente, die als Vorschau angezeigt werden (i.d.R. sind diese viel kleiner). 

Nachfolgend werden die Variablen des Hauptscriptes in "Serie_1.htm" beschrieben, die man moeglicherweise auf die eigenen Beduerfnisse hin anpassen muss.

Das Script funktioniert nur, wenn es auf einem HTTP-Server liegt.

Alle Bilder muessen die gleichen Abmessungen besitzen, die Indexbilder nicht.
Die Bilder haben in diesem Beispiel alle die Bildbreite 450 und die Bildhoehe 450.
Diese Werte zuzueglich einem Rand (hier 15) muessen unter 'innerWidth=465' und 'innerHeight=465' in der Zeile die mit BildWin beginnt, eingestellt werden.

Ganz wichtig, die Dateinamen!

Heisst das Bild z.B.: 

'Ich_bin_BildNr_25_aus_der_Serie_12.jpg',

so muss dem Dateinamen des zugehoerigen Indexbildes die "BildVorsilbe", in diesem Beispiel "pre_", vorangestellt werden.

Das entsprechende IndexBild heisst dann:

'pre_Ich_bin_BildNr_25_aus_der_Serie_12.jpg'

Die "BildVorsilbe" darf in den Dateinamen nur einmal auftauchen. Bei einigen 
Servern muss auch die Gross- und Kleinschreibung beachtet werden (z.B. Tripod.com)!

Die Indexbilder koennen in verteilten Verzeichnissen liegen. Die Bilder muessen 
jedoch alle im Unterverzeichnis "BildSubDir" (hier "Serie_1") liegen.

Nun brauchen wir noch die "BildAnzeige"-Datei. Bei der "BildAnzeige"-Datei 
handelt es sich um eine HTML-Datei, die beim Anklicken eines Indexbildes in das 
Anzeigefenster geladen wird. 

Direkt nach dem Aufruf zeigt diese Datei ein Bild namens "IndexBild.GIF" an, 
welches der Betrachter aber nicht sieht. IndexBild.GIF ist eine voellig  transparente GIF-Datei in der Bildgroesse (hier 450 x 450 Pixel). Es dient als 
Platzhalter und wird sofort durch das anzuzeigende Bild ersetzt.

Fast haette ich es vergessen.....
Wenn Ihr VOR der Tabelle bzw. VOR den IndexBildern weitere Grafiken auf den
IndexBildseiten einbinden moechtet, so muesst Ihr bei den Links der Bilder
im Feld z.B. "ZeigBild (5)" fuer jede vor den IndexBildern eingefuegte Grafik die
Zahl um eins hoeher stellen (aus "ZeigBild (0)" wir bei EINER Grafik "ZeigBild (1)" usw.).

Verzeichnisstruktur

Bei mir funtioniert die Sache inzwischen fuer etliche Filme in folgender 
Unterverzeichnisstruktur:

|
|
+-FotoAlbum                     <= Stammverzeichnis des FotoAlbums
| | index.htm                   <= Verweise auf Serie_1.htm, Serie_2.htm
| | Serie_1.htm                 <= IndexBilder der Serie_1
| | Serie_2.htm                 <= IndexBilder der Serie_2
| | ZeigBild.htm                <= HTML-Datei zur Anzeige der Bilder
| | IndexBild.GIF               <= Transparente GIF-Datei (450x450Pixel)
| |
| +---Serie_1                   <= Bilder und IndexBilder der Serie_1 
| | Gothisch-Achteck.jpg        <= Bild
| | Kretisch-Rechteck.jpg       <= Bild
| | Kretisch-Rund.jpg           <= Bild
| | Titelmenue.jpg              <= Bild
| | Saturn.jpg                  <= Bild
| | pre_Gothisch-Achteck.jpg    <= IndexBild
| | pre_Kretisch-Rechteck.jpg   <= IndexBild
| | pre_Kretisch-Rund.jpg       <= IndexBild
| | pre_Titelmenue.jpg          <= IndexBild
| | pre_Saturn.jpg              <= IndexBild
| |
| +---Serie_2                   <= Bilder und IndexBilder der Serie_2
| | Auch_ein_Bild.jpg           <= Bild
| | Noch_ein_Bild.jpg           <= Bild
| | Ein_anderes_Bild.jpg        <= Bild
| | pre_Auch_ein_Bild.jpg       <= IndexBild
| | pre_Noch_ein_Bild.jpg       <= IndexBild
| | pre_Ein_anderes_Bild.jpg    <= IndexBild
| | ...                         <= viele, viele mehr :)

Erweiterung bzw. Kurzanleitung

Wenn jetzt ein neuer Film vorliegt, erstelle ich ein neues Verzeichnis z.B. namens
"Serie_3" in meinem Fotoalbum-Verzeichnis. Hier gebe ich alle zuvor erstellten 
Bilder und IndexBilder hinein.

Ich verwende stets Bilder in der Groesse 450x450 Pixel. 

Jetzt kopiere ich z.B. die Datei "Serie_1.htm" in "Serie_3.htm". 

In der Datei "Serie_3.htm" aendere ich nun im Scriptbereich den Wert der Variablen "BildSubDir" auf: BildSubDir="Serie_3" .

Nun sind noch in der Tabelle von "Serie_3.htm" die Adressen der IndexBilder auf 
die der neuen IndexBilder und die Beschreibungs-Alternativtexte zu aktualisieren.

Um die neue Serie_3 auch aufrufen zu können, trage ich in "index.htm" einen Link auf "Serie_3.htm" ein und fertig.

Fragen sollten nach der langathmigen Anleitung eigentlich nicht mehr offen sein.
Sollte dennoch jemand eine Frage haben, dann bitte ein Mail an mich (s.o.).

Viel Spass damit
   Guzzy

Zurueck