Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: jQZoom Evolution - Ein Imagezoom-Script und der Einbau in NOF  (Gelesen 4145 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
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.
« Letzte Änderung: 01. Juni 2013, 22:07:44 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
Re: jQZoom Evolution - Ein Imagezoom-Script und der Einbau in NOF
« Antwort #1 am: 12. Mai 2013, 17:25:09 »
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!
« Letzte Änderung: 01. Juni 2013, 21:44:10 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Standardzoom
« Antwort #2 am: 12. Mai 2013, 18:45:19 »
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. });

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.
« Letzte Änderung: 01. Juni 2013, 21:44:28 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Invertierte Auswahl
« Antwort #3 am: 20. Mai 2013, 23:10:51 »
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. });

Dann geht es weiter wie beim Standardzoom.
Wichtig ist, dass der gleiche Klassenname wie im Script benutzt wird.
« Letzte Änderung: 01. Juni 2013, 21:44:47 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
Re: jQZoom Evolution - Verschiebare Auswahl
« Antwort #4 am: 20. Mai 2013, 23:21:06 »
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.
« Letzte Änderung: 01. Juni 2013, 21:45:03 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Zoom innnerhalb der Vorschau
« Antwort #5 am: 20. Mai 2013, 23:27:44 »
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. });

Die Klassenbezeichnung könnt ihr anpassen.
« Letzte Änderung: 01. Juni 2013, 21:45:20 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Zoom immer aktiv
« Antwort #6 am: 20. Mai 2013, 23:33:04 »
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>
« Letzte Änderung: 01. Juni 2013, 21:45:37 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Fadereffekte
« Antwort #7 am: 21. Mai 2013, 21:48:34 »
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>  


« Letzte Änderung: 01. Juni 2013, 21:45:58 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Galerie Funktion
« Antwort #8 am: 21. Mai 2013, 22:13:49 »
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


« Letzte Änderung: 01. Juni 2013, 21:46:21 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Ausrichtung und Offset
« Antwort #9 am: 01. Juni 2013, 18:54:05 »
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.
« Letzte Änderung: 01. Juni 2013, 21:46:42 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
jQZoom Evolution - Sonstige Möglichkeiten
« Antwort #10 am: 01. Juni 2013, 19:14:29 »
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>  
« Letzte Änderung: 01. Juni 2013, 19:29:35 von Dada »

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
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.


« Letzte Änderung: 20. Februar 2014, 20:28:19 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion