wie mit JS nun Grafiken "wechseln"?

[Patrick Andrieu]

Hallo!

http://www.atomic-eggs.com/z_testdir/html/juergen.html

Während mein Patenkind und seine Mama sich den Frankfurter Fastnachtumzug angeschaut haben, habe ich das Beispiel weitergesponnen, bezugnehmend auf meine Antwort auf Mathias hier.

Nochmals zu Jürgens Eröffnungsposting:

Irgendwie hab ich aber das Gefühl dass ich 1. damit (mit JS) mit Kanonen auf Spatzen schiesse und 2. mir mit dem Nachbestücken bzw. Entfernen von gewissen Fotos einfach schwer tun werde.

In meiner Antwort erwähnte ich den Einsatz serverseitiger Techniken, die zum einen das Hinzufügen und Entfernen von Bildern erleichtern, und zwar so, dass man nicht jedesmal den Inhalt des DIV-Elements für die Thumbnails händisch coden muss. Ferner hat das oben verlinkte Beispiel den Nachteil, dass wenn zwar Besucher ohne JavaScript die Bilder sehen können, diese Bilder im nackten, unschönen Browserfenster gezeigt werden.

Mit dem zweiten Beispiel ist es anders:

http://www.atomic-eggs.com/z_testdir/html/juergen.shtml

Hier sind erstmal CSS und JavaScript ausgelagert. Das ganze JavaScript? Nein, ein kleines Teil ist noch da, das sind Werte, die mir das Perl-Skript nach dem Einlesen des Bilderverzeichnisses liefert. Aber der Reihe nach.

Die Datei auf dem Server sieht so aus:

http://www.atomic-eggs.com/z_testdir/files/juergen.txt

An zwei Stellen wird die Ausgabe eines Perl-Skripts included, und zwar Zeile 15 (eben die benötigten Variablen für JavaScript) und Zeile 43. Das Skript thumbs.pl liest die vorhandenen Dateien aus dem Bilderverzeichnis, sortiert sie nummerisch, extrahiert Nummern und Namensteil der Bilder, und schreibt, mit dem Parameter 'js' aufgerufen, die Variablen npart und start_pic (die dann von JavaScript nach dem Laden der Datei gebraucht werden) in dem JavaScript-Block.

Ohne Parameter aufgerufen (Zeile 43 der .shmtl-Datei), wird der else-Zweig des Skriptes ausgeführt und ausgegeben: eben die Verlinkung der Thumbsnails im DIV "thumbs".

Verlinkt wird dabei ein weiteres Skript, gallery.pl, auf das wir gleich kommen:

<a class="thumbs" href="/z_testdir/scripts/perl/gallery.pl?url=/roadster/20040228/DSCN1001.jpg">.....</a>

Das unterscheidet sich vom ersten Beispiel für Jürgen dadurch, dass diesmal der komplette Bilddateiname im href-Attribut steht, weswegen das JavaScript im zweiten Beispiel abgeändert wurde - ist aber im Grunde viel einfacher.

Und was macht nun gallery.pl?

Wenn ein Besucher JavaScript deaktiviert hat, kann ja beim Klick auf die Thumbnails kein onclick return false »greifen«, sondern das Linkziel wird aufgerufen. Die URI ist .../gallery.pl?url=/.../.../DSCN1234.jpg. Das Skript nimmt den Wert des url genannten Parameter entgegen und generiert mittels eines HTML-Templates die No-JavaScript-Galerie-Seite.

Dabei bedienst sich das Skript des Moduls HTML::Template und dieses Templates:

http://www.atomic-eggs.com/z_testdir/files/juergen_tpl.txt

Auch hier liest das Skript gallery.pl das Bildverzeichnis ein, und generiert in einem Loop die Verlinkungen im DIV "thumbs".

Bei jedem Klick auf einem Thumbnail wird das Skript erneut aufgerufen, generiert die Seite neu mit dem neuen Bild im rechten DIV. So sieht es aus wie die JavaScript-Variante, nur etwas langsamer weil jedesmal neu generiert werden muss. Und so sind alle zufrieden und glücklich und ich auch ;)

Viele Grüße aus Frankfurt/Main,
Patrick