das digiwerX-Weblog

Während der Arbeit an der neuen Seite für mein Portfolio (eine Broschüre) überlegte ich, wie ich einige Bilder dazu einerseits auf der Seite selbst und auch nochmal als vergrößerte Ansicht bereitstellen könnte. Das alles ohne den Besucher durch Seitenwechsel oder Zurück-Klick-Aktionen zu nerven und im Hinblick auf die Nutzerfreundlichkeit  auch ohne technischen Zusatz-Schnickschnack. Ich habe mir mal die inzwischen zahlreich vorhanden Overlay-Bildertools angesehen. Overlay heißt, beim Klick auf das Bild wird das vergrößerte Bild über die eigentliche Seite gelegt. Das bringt Ruhe in die Seite, da die Basis-Seite immer da bleibt.
Dass gewisse optische Spielereien meist erst durch Javascript so aussehen, ist dabei in Ordnung. Wichtig war mir nur, dass alles auch bei deaktiviertem Javascript funktioniert. Vielleicht dann etwas weniger schick, aber mit der selben Funktionalität. Eine weitere Bedingung war, dass es ein schlankes und schnelles Script ist. Da gibt es doch große Unterschiede. Gelandet bin ich dann bei Lightbox 2. Das ist ein kleines, leicht zu handhabendes Script, welches sich der Scriptaculous-Effektbibliothek bedient. Es wird alles nötige bereits mitgeliefert. Ein paar Kilobyte Upload und fertig. Man braucht nur die Scripte im Dokumentenkopf einbinden. Dann werden die jeweiligen Bilder einmal als Vorschauversion und nochmal in der Vergrößerung angelegt. Im HTML-Dokument selbst wird über eine simple „rel=“-Anweisung im Bildlink die Beziehung zu Lightbox hergestellt. Es lassen sich auch Bildgruppen erstellen (habe ich bei der Broschüre auch getan), wo dann bei den vergrößerten Bildern direkt weitergeklickt werden kann, ohne erst das Overlay-Fenster zu schließen.
Das Aussehen des Fensters selbst, aller Elemente darin und die Deckkraft des Hintergrunds lassen sich über eine separate CSS-Datei, die ebenfalls mitgeliefert wird, steuern. Es ist einem selbst überlassen, ob man die Datei mit einbindet, oder die CSS-Anweisungen (es sind nur 21 Zeilen) in die eigene CSS-Datei übernimmt. Ich habe es vorgezogen, das separat zu lassen zwecks Übersichtlichkeit. Farben, Hintergrund und so weiter habe ich auf meine Site abgestimmt. Leider sind die Bildbeschriftungen für die Vor- und Zurück-Schaltflächen in Englisch, daher habe ich mir eigene Schaltflächen mit deutscher Beschriftung gebastelt. Summa summarum waren aber die Schaltflächen der einzige Arbeitsaufwand beim Einbau der Overlay-Funktion. Für diejenigen, denen die deutschen Schaltflächen auch besser gefallen, stelle ich sie zum Download zur Verfügung. Über einen Backlink bei Benutzung freue ich mich natürlich immer .

Download (.zip)

Mein Fazit: passt, wackelt und hat Luft, wie man so schön sagt. Leicht zu handhaben und ohne große Einarbeitung einsatzfähig. Daumen hoch.