jQuery - Bildausschnitte zoomen

jQuery kennt eine Vielzahl an Zoom-Plug-ins. Eines der interessantesten ist dabei zweifellos das Plug-in gzoom. Denn dieses Plug-in kombiniert gekonnt mehrere Plug-ins zu einer genialen Anwendung.

[Beispiel anzeigen]




Die offizielle Projektwebseite dieses Plug-ins finden Sie unter http://lab.gianiaz.com/jquery/gzoom/. So gut das Plug-in auch arbeitet, in die Dokumentation haben die Entwickler leider kaum Zeit investiert. Eine auch nur ansatzweise vernünftige Anleitung, wie man das Plug-in nutzen kann, ist nicht verfügbar. Das ist umso ärgerlicher, da das Plug-in durchaus interessante Funktionen zu bieten hat. Hier die wichtigsten Eckdaten:

• Vergrößern und Verkleinern der Bildausschnitte über entsprechende Schaltflächen.
• Das Vergrößern und Verkleinern ist auch über einen Schieberegler möglich.
• Zoomen lässt sich über das Mausrad.
• Der Bildausschnitt lässt sich mit dem Mauszeiger verschieben.
• Die Bilder können in einer Lightbox angezeigt werden.

Das Plug-in läuft in den folgenden Browsern:

• Firefox 3
• Internet Explorer 8
• Google Chrome
• Safari

Auf die Projektwebseite wurde bereits verwiesen. Neben einigen Beispielen finden sich zum jQuery-Plugin gzoom keine weiteren Informationen. Als Entwickler muss man sich also das notwendige Know-how aus den vier Beispielen ziehen, die sich auf der genannten Webseite befinden.

Das Plug-in ist übrigens keine reine Eigenentwicklung. Vielmehr baut es auf den beiden Plug-ins miniZoomPan und lightBox auf bzw. verwendet deren Logik.

Um das Plug-in nutzen zu können, muss zunächst jQuery eingebunden werden. Zusätzlich werden jQuery-UI-Komponenten benötigt. Sollten Sie bislang noch nicht mit jQuery UI gearbeitet haben, finden Sie beispielsweise hier auf psd-tutorials.de eine Einführung in dieses Thema.

Benötigt werden in jedem Fall die folgenden Dateien:

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/ui.core.min.js"></script> 
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript" src="js/jquery.gzoom.js"></script>

Neben der bekannten jQuery-Datei müssen Sie auch die UI-Kerndatei einbinden. Diese können Sie von der Seite http://jqueryui.com/download herunterladen. Dort finden Sie übrigens auch gleich noch die ui.slider.min.js.




Für die aktuelle Anwendung genügt es, wenn Sie bei der UI-Paketzusammenstellung die beiden Kontrollkästchen bei Core und Slider aktivieren. Über die Download-Schaltfläche kann das personalisierte Archiv heruntergeladen werden. Interessant sind die im js-Verzeichnis liegenden Dateien.

Die jquery.gzoom.js können Sie von der Seite http://lab.gianiaz.com/jquery/gzoom/ herunterladen.

Um den beschriebenen Mausradeffekt anwenden zu können, muss zusätzlich das Plug-in MOUSE WHEEL EXTENSION eingebunden werden. Die entsprechende Plug-in-Datei gibt es auf der Seite http://github.com/brandonaaron/jquery-mousewheel/downloads. Laden Sie sich diese von dort herunter und binden Sie sie ebenfalls ein.  

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

Für die formatierte Ausgabe können Sie zusätzlich die auf der Seite http://lab.gianiaz.com/jquery/gzoom/css/jquery.gzoom.css angebotene CSS-Datei einbinden.

<link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen" />

Wie bei jQuery üblich, können Sie auch auf die Google-Bibliothek zugreifen. Der vollständige Kopfbereich sähe in diesem Fall dann folgendermaßen aus:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery_mousewheel.js"></script>
<script type="text/javascript" src="jquery_gzoom.js"></script>
<link rel="stylesheet" href="jquery_gzoom.css" type="text/css" media="screen" />

Damit ist der head-Bereich der Seite vollständig. Weiter geht es mit der eigentlichen Definition der Anwendung. Wie üblich muss zunächst ein Vorschaubild angelegt werden.

<div id="bild" class="zoom"> 
 <img src="images/thumbs/toscana1.jpg" alt="colline toscane" title="Colline Toscane (SI) - Italy - 2007 &copy; Giovanni Battista Lenoci" /> 
</div>

Der dem title-Attribut zugewiesene Wert wird in einem Tool-Tipp-Fenster angezeigt.




Sie können selbst entscheiden, ob dieses Fenster in ihrer Galerie stört. Sollten Sie es als störend empfinden, lassen Sie – auch wenn das nicht dem HTML-Standard entspricht – das title-Attribut weg.

Weiter geht es mit dem jQuery-Teil. Eine typische Anwendung könnte folgendermaßen aussehen:

[Beispiel anzeigen]

<script type="text/javascript">  
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bild").gzoom({
                sW: 300,
                sH: 225,
                lW: 1400,
                lH: 1050,
                lighbox: false
        }); 
     });
  /* ]]> */
 </script>

Wie bei jQuery üblich, wird zunächst angegeben, auf welches Seitenelement das Plug-in angewendet werden soll. Im aktuellen Beispiel handelt es sich dabei um das Element mit der ID bild.

Das Plug-in kennt einige – wenn auch nicht sonderlich viele – Optionen. Im aktuellen Beispiel wurden fünf verwendet:

• sW – Legt die Breite des Bildes fest,
• sH – Legt die Höhe des Bildes fest.
• lW – Das ist die maximale Breite des Zoom-Bildes.
• lH – Das ist die maximale Höhe des Zoom-Bildes.
• lightbox – Bestimmt, ob durch Anklicken des Bildes das Bild in Originalgröße innerhalb einer Lightbox angezeigt werden soll.

Besonders interessant ist der lightbox-Parameter, der im vorherigen Beispiel auf false gesetzt ist. Weist man lightbox hingegen den Wert true zu, wird das Bild in Originalgröße innerhalb einer Lightbox angezeigt.

<script type="text/javascript">  
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bild").gzoom({
                sW: 300,
                sH: 225,
                lW: 1400,
                lH: 1050,
                lighbox: true
        }); 
     });
  /* ]]> */
 </script>

Das Ergebnis sieht folgendermaßen aus:




Sinnvoll ist der Wert true hier aber natürlich nur, wenn tatsächlich ein Bild in einem größeren Format angezeigt werden soll. Ist das nicht der Fall, verwenden Sie false.

Durch die Option zoomIcon können Sie eine spezielle Grafik angeben, die die Möglichkeit zum Vergrößern des Bildes signalisiert. Sinnvoll ist zoomIcon ausschließlich in Verbindung mit lightbox: true.




Diese Grafik ist im der oberen rechten Ecke des Bildes zu sehen. Wird sie angeklickt, öffnet sich das Bild in Originalgröße in einer Lightbox.

Eine entsprechende Anwendung könnte folgendermaßen aussehen:

<script type="text/javascript">  
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bild").gzoom({
                sW: 300,
                sH: 225,
                lW: 1400,
                lH: 1050,
                lighbox : false,
 zoomIcon:'images/gtk-zoom-in.png'
        }); 
     });
  /* ]]> */
 </script>

Selbstverständlich ist das hier vorgestellte Plug-in nicht die einzige Zoom-Lösung, die es für jQuery gibt. Wer eine etwas einfachere Variante sucht, wird beispielsweise auf der Seite http://www.gcmingati.net/wordpress/wp-content/lab/jquery/minizoompan/ fündig.




Das dort angebotene Plug-in arbeitet nach einem vergleichbaren Prinzip. Die Grafiken werden, wenn man sie mit dem Mauszeiger berührt, vergrößert. Zudem können die Bildausschnitte mit dem Mauszeiger verschoben werden. Im Gegensatz zu dem in diesem Tutorial vorgestellten Plug-in fehlen allerdings einige Funktionen. So lässt sich beispielsweise das Mausrad nicht nutzen. Außerdem ist keine Klick-Funktion vorhanden, durch die die Bilder in Originalgröße innerhalb der Lightbox angezeigt werden.