FancyZoom: Bilder zoomen mit JavaScript
Endlich können Bilder auf eine elegante Weise gezoomt werden.
Das Anzeigen von Detailbildern erfolgt immer auf die gleiche langweilige Art und Weise: Klick auf das Thumbnail und das Bild öffnet sich in einem neuen Fenster oder auf einer neuen Website. Langweilig.
Mit FancyZoom hat das ein Ende. Dieses kleine JavaScript öffnet Bilder mit einem tollen Zoom-Effekt. Dabei wird von dem Thumbnail zur Detailansicht gezoomt. Der Vorgang läuft sehr flüssig und ohne Ruckeln ab.
[youtube lkkokrccC40]
Das Einbinden ist denkbar einfach. Im HTML-Head werden einfach zwei kleine JavaScript-Dateien geladen:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script> <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Im Anschluss muss im Body-Tag der Event onload hinzugefügt werden:
<body onload="setupZoom()">
Wenn die Skripte dann geladen wurden und man mit einem Link direkt auf ein Bild verweisst, wird dieses Bild ab sofort gezoomt. Ein Link könnte so aussehen:
<a href="image.jpg"><img src="thumbnail.jpg" /></a>
Tipp: Wenn man dem im A-Tag noch den Title vergibt, erhalten die Detail-Bilder eine schicke Bildunterschrift. Beispiel:
<a title="Bildunterschrift" href="image.jpg"><img src="thumbnail.jpg" /></a>
Wir haben FancyZoom für ein Kundenprojekt eingesetzt. Das Zoomen der Bilder wirkt jetzt sehr elegant. Ein Demo ist auch verfügbar.
Happy Zooming!
Hallo Tobias.Habe FancyZoom auf meiner Page angewandt wie beschrieben.Vom einbinden ist das ja wirklich einfach.Ein Problem gibt es aber dennoch.Es wird kein Close Button angezeigt.Kannst Du mir bitte weiterhelfen?
schöne Grüße aus Wien
Robert