jQZoom Evolution - Ein Imagezoom-Script und der Einbau in NOF

[Dada]

jQZoom Evolution ist ein Script, das einen Bildauschnitt bei Mouseover in einem gesonderten Layer vergrößert. Ihr kennt dies sicher aus diversen Onlineshop's.

Demo ansehen

Wie ihr auf der Demoseite seht, bietet dieses Script sehr viele Möglichkeiten.

Das Script könnt ihr unter http://www.mind-projects.it/projects/jqzoom/index.php#download_section herunterladen.

[Dada]

Entpackt das Zip-Archiv und ladet die folgenden Verzeichnisse und die darin enthalten Dateien auf euren Webspace. Das Verzeichnis Demo braucht ihr nicht hochzuladen.
Alternativ in eure lokale Publizierung zum offline testen.


Nun öffnet ihr die Seite in NOF, in der das Script eingebunden werden soll.
Dann fügt ihr folgende Zeilen zwischen die Headtags ein.

Zunächst einmal jQuery.

Code: HTML5

1. <script type='text/javascript' src='../jqzoom/js/jquery-1.6.js'></script>

Und der Pfad für das Script

Code: HTML5

1. <script type='text/javascript' src='../jqzoom/js/jquery.jqzoom-core.js'></script>
2.  

und die Style-Datei.

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="../jqzoom/css/jquery.jqzoom.css">

Die relativen Pfade müsst ihr nartürlich anpassen!

[Dada]

Standard-Zoom

Die grundlegende Verwendung möchte ich euch am Standard-Zoom zeigen.

Um das Script zu vervollständigen, fügt folgende Zeilen am Ende des Hauptextes ein.

Code: HTML5

1. <script type="text/javascript">
2. $(document).ready(function(){  
3.     $('.standartzoom').jqzoom();  
4. });
5. </script>

Jetzt benötigt ihr noch ein Foto in zwei verschiedenen Auflösungen.

Fügt das kleine Vorschaubild in eure Seite ein.
Danach klickt ihr in den Bildeigenschaften auf „Link“





Wählt dort nun unter Linktype „Datei-Link“ aus und wählt den Pfad zu dem großem Bild.
Danach auf den Button „HTML“ klicken und dort unter „in dem Link“ folgendes eingeben.

Code: HTML5

1. class="standartzoom" title="Möwe"

Wichtig ist, dass der Klassename genauso lautet wie ihr es im Script angeben habt.

Jetzt ist Script schon komplett eingebaut.
Weitere Bilder fügt ihr genauso ein.

[Dada]

Bei der invertierten Auswahl ist das Vorschaubild mit einer weißen Transparenz belegt. Nur die Auswahllinse ist klar.

Demo

Hier erfolgt der Einbau wie schon beim Standardzoom beschrieben.
Allerdings ist der Code, der am Ende des Hauptextes eingefügt wird anders.
Hier wird folgendes eingefügt.

Code: HTML5

1. <script type="text/javascript">
2.  $(document).ready(function(){  
3.      $('.klassename').jqzoom({zoomType: 'reverse'});
4. });
5. </script>

Dann geht es weiter wie beim Standardzoom.
Wichtig ist, dass der gleiche Klassenname wie im Script benutzt wird.

[Dada]

Bei der verschiebbaren Auswahl ist die Auswahllinse immer aktiv und muss mit gedrückter Maustaste verschoben werden.

Demo

Auch hier erfolgt der Einbau wie bereits beschrieben, es ist auch hier wieder ein geänderter Code,der eingefügt werden muss.

Code: HTML5

1. <script type="text/javascript">
2.  $(document).ready(function(){  
3.   $('.dragzoom').jqzoom({  
4.         zoomType: 'drag'
5.                 });
6. });
7.  </script>

Die Klassenbezeichnung kann auch hier angepasst werden, sie muss im Link aber gleich lauten.

[Dada]

Hier wird im Vorschaubild vergrößert, es gibt hier keine Auswahllinse.

Demo

Auch hier ist der Code wieder ein bisschen anders.

Code: HTML5

1. <script type="text/javascript">
2.  $(document).ready(function(){  
3.  $('.innerzoom').jqzoom({
4.                     zoomType: 'innerzoom'
5.                 });
6. });
7. </script>

Die Klassenbezeichnung könnt ihr anpassen.

[Dada]

Hier wird das Zoomfenster immer angezeigt, die Auswahllinse ist hierbei in der Bild mitte und wechselt auf die Position des Mauszeigers sobald er im Bildbereich ist.

Demo

Das hier ist der Code, der dafür benötigt wird.

Code: HTML5

1. <script type="text/javascript">
2.  $(document).ready(function(){  
3.  $('.alwayzoom').jqzoom({
4.              zoomType: 'standard',
5.          alwaysOn : true
6.       });
7. });
8.  </script>

[Dada]

Dem Zoomfenster kann man auch einen Fadereffekt zuweisen.
In meinem Beispiel mit dem Standardzoom.

Einblenden
Demo

Code: HTML5

1.     <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo1').jqzoom({  
4.             showEffect : 'fadein'  
5.           });
6.     });
7.     </script>

Ausblenden
Demo

Code: HTML5

1.     <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo2').jqzoom({  
4.              hideEffect : 'fadeout'                    
5.           });  
6.     });
7.     </script>

Ein- und Ausblenden
Demo

Code: HTML5

1.     <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo3').jqzoom({  
4.             showEffect : 'fadein',
5.             hideEffect : 'fadeout'                     
6.           });  
7.  
8.     </script>

Auch könnt ihr die Geschwindigkeit des Fadereffeks ändern, die Angabe erfolgt in Millisekunden.
Demo

Code: HTML5

1.     <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo4').jqzoom({  
4.             showEffect : 'fadein',
5.                         hideEffect : 'fadeout',
6.             fadeinSpeed : '2000',
7.             fadeoutSpeed : 'fast'                      
8.           });  
9.  
10.     </script>  

[Dada]

Das Skript bietet auch die Möglichkeit, eine Gallery zu erstellen.
In meinem Beispiel verwende ich den Standardzoom.

Demo

Das Skript sieht hierbei ganz normal aus.

Code: HTML5

1.     <script type="text/javascript">
2.      $(document).ready(function(){  
3.     $('.demo1').jqzoom({  
4.          
5.           });
6.                   });  
7.  
8.      </script>

Nur der Code, den ihr in den Link einfügt, unterscheidet sich.


Für das Hauptbild gebt ihr folgendes ein.

Code: HTML5

1. class="demo1" title="Gallery Funktion" rel="Gallery1"

Die Bezeichnung der Klasse sowie das rel-Attribut könnt ihr ändern, nur müsst ihr drauf achten, dass es im nächsten Arbeitschritt gleich ist.

Fügt nun die noch kleineren Vorschaubilder für die Galerie ein.
Diesen weist ihr auch wieder einen Link zu, nur dass es diesmal der Linktyp Javascript ist.

Code: Javascript

1. void(0);

In dem Link wird jezt noch der Bezug zur Galerie hergestellt und die Pfade zum Vorschaubild und Zoombild definiert.

Code: HTML5

1. rel="{gallery: 'Gallery1', smallimage: '../Auto_Klein.jpg',largeimage: '../Auto_Gross.jpg'}"

gallery muss nun gleich lauten wie bei dem rel-Attribut aus dem vorherigen Schritt.
smallimage ist das Vorschaubild
largeimage das Zoombild

[Dada]

Die Ausrichtung und Versätze des Zoomfensters könnt ihr ändern.
Der Einbau funktioniert wie schon die ganze Zeit, deshalb  poste ich nur den zweiten Codeabschnitt.


Ausrichtung links
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo2').jqzoom({  
4.              position : 'left'                 
5.           });
6. });  
7. </script>  

Ausrichtung rechts
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo3').jqzoom({  
4.              position : 'right'                        
5.           });
6. });  
7. </script>  

Ausrichtung oben
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo4').jqzoom({  
4.              position : 'top'                          
5.           });
6. });  
7. </script>

X-Offset
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo6').jqzoom({  
4.              xOffset : 40                              
5.           });
6. });  
7. </script>  

Hier habe ich ein Offset von 40px verwendet, ihr gebt dies hinter xOffset an.



Y-Offset
Demo

Code: HTML5

1. $('.demo7').jqzoom({  
2.              yOffset : 20                              
3.           });
4. });  

Wie schon die ganze Zeit könnt ihr die Klassenbezeichnung anpassen, ihr müsst aber genauso dann in dem Link stehen haben.

[Dada]

Den Ladetext kann man ändern sowie die Titelleiste deaktivieren.
Dies habe ich auch in einem Beispiel getan.
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo8').jqzoom({  
4.              
5.             preloadText  : 'Lade Zoom',
6.             title  : false                     
7.           });
8. });  
9. </script>  

Die Größe des Zoomfensters kann man auch ändern
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo9').jqzoom({  
4.              
5.         zoomWidth  : 500,
6.         zoomHeight  : 500                      
7.           });
8. });  
9. </script>  

zoomWidth ist die breite in px,
zoomHeight ist die Höhe in px.


Die Auswahllinse kann man ebenso deaktivieren.
Demo

Code: HTML5

1. <script type="text/javascript">
2.      $(document).ready(function(){  
3.      $('.demo10').jqzoom({  
4.              
5.         lens  :  false
6.                 });    
7. });  
8. </script>  

[Dada]

Die Beispiele zeigen fast alle Funktionen des Scripts, allerdings immer  alleine bis auf Ladetext und Titelleiste, da hatte ich schon zwei Optionen kombiniert.

Ihr könnt euch ein eigenes Markup erstellen, ihr müsst nur auf die richtige Schreibweise achten sowie auf die Klammern, Kommata, Semikolons und Hochkommata.
Es ist halt normales jQuery.
Die ganze Liste der Optionen findet ihr bei dem  Autor des Scripts.
http://www.mind-projects.it/projects/jqzoom/index.php#documentation

Beispiel für ein Markup

Code: Javascript

1.  $(document).ready(function(){  
2.      $('.klassenbezeichnung').jqzoom({  
3.              
4.         option  :  wert,
5.         option  :  wert
6.                 });    

Wichtig: Hinter die letzte Option kommt kein Komma!

Auch ist es möglich, verschieden Zoomtypen auf einer Seite zu haben.
Dies ist auch auf meiner Demoseite so.
Ihr müsst darauf achten, dass die Klammen geschlossen sind.
Javascript-Grundwissen ist hier von Vorteil.