Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

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

Autor Thema: jQZoom Evolution - Ein Imagezoom-Script und der Einbau in NOF  (Gelesen 7267 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