Die Lightbox-Clone-Bibliothek FancyZoom
FancyZoom ist keine Slideshow und auch kein GalerieScript. Alle Bilder werden einzeln behandelt. Es gibt keine direkte Automatik, mit der man zum nächsten/vorherigen Bild gelangt. Daher ist das JavaScript auch in erster Linie für die anschauliche Präsentation von Einzelbildern, die sich verstreut auf einer Webseite befinden, geeignet.
Download
Die kleine Bibliothek einschließlich der erforderlichen Grafiken kann von http://www.cabel.name/2008/02/fancyzoom-10.htmlheruntergeladen werden.
Einbau
JavaScript-Dateien einbinden:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script> <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
body-Tag anpassen:
<body onload="setupZoom()">
Zoom-Bild mit Vorschaubild:
<a title="Bildbeschreibung" href="grosses-bild.jpg"><img src="vorschau-bild.jpg" /></a>
Zoom-Bild mit Textlink:
<a title="Bildbeschreibung" href="grosses-bild.jpg">Linktext</a>
Demo
Eigenschaften
- Zoom erfolgt immer ausgehend vom Textlink oder Thumnail-Bild
- keine weiteren Bibliotheken erforderlich
- Bildbeschreibung über
<title>des Links - Zoom-Faktor wird an Browser-/Bildschirmauflösung angepasst
- Wenn ein Bild nicht gezoomt werden soll, dann muss
rel="nozoom"als Attribut hinzugefügt werden.
Grenzen
- keine inline-Inhalte
- keine iFrame-Inhalte
- im IE8 ein bisschen lahm
- keine Schatten im IE8
- Einbindung teilweise problematisch, da der
<body>-Tag modifiziert werden muss, d.h. z.B. keine Einbindung bei NPage-Design-Vorlagen (ev. noch testen, ob es mit einem 2. body-Tag, d.h. dirty-coding, möglich ist.
Anpassungen
In der Datei FancyZoom.js muss je nach Einsatzort die Zeile
var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
geändert werden. darüber hinaus gehende Anpassungen sind weder erforderlich noch möglich, es sei denn, man legt selbst Hand an den eigentlichen JavaScript Code.
Eine umfangreiche Zusammenfassung diverser Light-Box-Varianten findet man hier.