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:

Im Anschluss muss im Body-Tag der Event onload hinzugefügt werden:

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:

Tipp: Wenn man dem im A-Tag noch den Title vergibt, erhalten die Detail-Bilder eine schicke Bildunterschrift. Beispiel:

Wir haben FancyZoom für ein Kundenprojekt eingesetzt. Das Zoomen der Bilder wirkt jetzt sehr elegant. Ein Demo ist auch verfügbar.

Happy Zooming!


0 0 0


Diskussion

avatar placeholder
10. Januar 2016 von Robert

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

Mitdiskutieren