Bilder zoomen mit FancyZoom

fancy-zoomFancyZoom ist ein super Tool um Bilder auf der eigenen Homepage durch einen einfachen Klick effektvoll zoomen zu lassen.

Beispiel: FancyZoom in Action (alle Bilder auf dieser Seite können durch einen einfachen Klick gezoomt werden)

Die großen Vorteile dieses Tools sind:

  • Es muss kein neues Fenster geöffnet werden
  • Sehr einfach zu integrieren - nur 2 Codezeilen im eigenen HTML Code und ein zwei Ordner per ftp hochzuladen
  • Arbeitet und funktioniert in Safari, Firefox, IE7, und IE6
  • Nett animiert (zB mit Schlagschatten unter dem gezoomten Bild)
  • Funktionieret automatisch bei Verlinkung auf ein anderes Bild

download Download von FancyZoom 1.1.zip (53.37 KB)

Installation:

Zuerst mal die runtergeladene Zip-Datei entpacken. Anschließend die Ordner js-global und images-global per ftp auf den Server laden (am besten einfach ins root-verzeichnis).
Als nächstes gehen wir in die Datei in welcher dann auch gezoomt werden soll und ergänzen dort folgenden Code:

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

und im <body> Tag:

<body onload="setupZoom()">

Das wars!
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Jetzt braucht man nur mehr das gewünschte Bild mit dem größeren Bild verlinken und schon funktionierts.