Forum
05.10.2009, 18:26

Mit jQZoom Artikeldetailbild in Artikeldeteailanzeige dynamisch vergrößern

Sehr geehrte Kunden,

Sie kennen sicher noch die Funktion "IFRAME statt Pic in Artikeldetailanzeige", mit der man sich Details des Standard-Artikelbildes (123p.jpg) vergrößert anzeigen lassen kann.

Eine andere Lösung haben wir mit dem heutigen Update nun zusätzlich implementiert: - jQZoom!
Fahren Sie einfach mal im nachfolgenden Beispiel mit der Maus über das Artikeldetailbild:


(klick, um dieses Beispiel Live zu sehen)

Es handelt sich hierbei um eine frei verfügbare Javascript-Funktion aus den bekannten jquery Klassen, welche mit wenigen Klicks auch in Ihrem Shop aktiviert werden kann. Diese Funktion ist nicht Bestandteil des Shops, wir zeigen Ihnen lediglich, wie Sie diese frei nutzbare JS-Funktion im Shop nutzen können. Wie gewohnt haben wir das ganze so für Sie vorbereitet, dass es mit wenigen Handgriffen nutzbar ist.

Das Prinzip ist einfach, wir nutzen die PIC_A Grafik als Vergrößerung! Das PIC aus dem Artikeldetail muss dabei die gleiche Proportion wie das PIC_A haben! Das PIC_A sollte auch deutlich größer sein als das PIC, damit der Effekt für den Besucher auch einen Mehrwert bringt. Ein nur um 50% größeres PIC_A würde kaum mehr Details anzeigen und den Betrachter eher enttäuschen. Daher empfehlen wir mindestens die doppelte, besser 3-fache Auflösung gegenüber dem PIC. In dem Beispiel im Demoshop ist es übrigens eine 6-fache Auflösung.

Die Einstellung ist einfach:

Sollte die Funktion "Rahmen Pic" aktiviert sein, was man je Artikel separat einstellen kann, so muss diese auf "nein" umgestellt werden. Ansonsten funktioniert die Zoom-Funktion nicht!

Folgende Texte müssen in den entsprechenden Feldern ergänzt werden:

"Layout" > "Schriften / CSS" > "ROOT":


div.jqZoomTitle {z-index:5000;text-align:center;font-size:11px;font-family:Tahoma;height:16px;
padding-top:2px;position:absolute;top: 0px;left: 0px;width: 100%;color: #FFF;  background: #999;}

.jqZoomPup {overflow:hidden; background-color: #FFF; -moz-opacity:0.6; opacity: 0.6;
filter: alpha(opacity = 60); z-index:10; border-color:#c4c4c4; border-style: solid; cursor:crosshair;}

.jqZoomPup img {border: 0px;}

.preload {-moz-opacity:0.8;opacity: 0.8;filter: alpha(opacity = 80);color: #333;font-size: 12px;
font-family: Tahoma;text-decoration: none;border: 1px solid #CCC;background-color: white;
padding: 8px;text-align:center; background-image: url(https://cdn.powergap.de/pg_zoomloader.gif);
background-repeat: no-repeat;background-position: 43px 30px;width:90px;* width:100px;
height:43px;*height:55px;z-index:10; position:absolute;top:3px;left:3px;}

.jqZoomWindow {border: 1px solid #999;background-color: #FFF;}


"Sonstiges" > "Sonstige Einstellungen" > Feld "Javascript_Head":


<script language="javascript" type="text/javascript" src="x_jquery.min.js"></script>
<script language="javascript" type='text/javascript' src='x_jquery.jqzoom.js'></script>
<script type="text/javascript">
var options = {
zoomWidth: 200,
zoomHeight: 250,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'medium',
title: false,
lens: true,
xOffset: 20
}
$(function() {
               $(".jqzoom").jqzoom(options);

});
</script>


Dieser Code kann mit den folgenden Optionen verändert werden:









































































zoomWidth200The popup window width showing the zoomed area.
zoomHeight200The popup window height showing the zoomed area.
xOffset10The popup window x offset from the small image.(always positive value if the 'position' option is 'right/left', positive/negative if the 'position' option is 'top/bottom'.
yOffset0The popup window y offset from the small image.(positive/negative value if the 'position' option is 'right/left', always positive if the 'position' option is 'top/bottom'.
position'right'The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'.
lenstrueif setted to false,the small lens,over the image, won't show.
titletrueShow a small title over the image it can be the anchor title and if not specified,it will get the small image title.
showEffect'show'The Effect by which showing the popup window.Options available: 'show' ,'fadein'.
hideEffect'hide'The Effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.
fadeinSpeed'fast'Changes fade in speed,in case the showEffect option is setted to 'fadein'.(options: 'fast','slow','medium')
fadeoutSpeed'slow'Changes fade out speed,in case the hideEffect option is setted to 'fadeout'.(options: 'fast','slow','medium')
showPreloadtrueShow the preload loading indicator.(options: 'true','false')
preloadText'Loading zoom'Option to customize the preload indicator text.
preloadPosition'center'By default the preload indicator is centered over the small image.You can optionally use the 'bycss' option letting you to change its position by css.

(Die Beispielwerte in der Mitte sind die Standardeinstellung)


Achtung! Sollte man das "x_jquery.min.js" schon im Head eingefügt haben (für z.B. "jquery flow - Slideshow"), dann bitte kein zweites mal einfügen. Es würde sonst im Shop zu Fehlermeldungen kommen!

Jetzt braucht man nur noch eine entsprechende Vergrößerung für das "Pic", muss diese als "Pic A" in der Shopverwaltung im Bilderupload hochladen und den Haken bei "jqzoom aktivieren" setzen.



Da wir die Javascripte nicht selbst entwickelt haben, ist technischer Support dazu leider nicht möglich. Wir helfen natürlich trotzdem so weit wie möglich bei der Einbindung. Können aber auf z.B. Lauffähigkeit keine Garantien aussprechen.

P.S. Sollten Probleme auftreten wenn zeitgleich auch die Ajax Suchhilfe genutzt wird bitte folgenden Code verwenden:

<script language="javascript">
   jQuery.noConflict();
</script>

<script language="javascript" type="text/javascript" src="x_jquery.min.js"></script>
<script language="javascript" type='text/javascript' src='x_jquery.jqzoom.js'></script>
<script type="text/javascript">
var options = {
zoomWidth: 300,
zoomHeight: 300,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'medium',
title: false,
lens: true,
xOffset: 20,
showPreload: true,
preloadText: 'Zoom-Funktion lädt...',
preloadPosition: 'center'
}
jQuery(function() {
               jQuery(".jqzoom").jqzoom(options);

});
</script>

<script language="javascript" type="text/javascript" src="x_jquery.flow.1.2.auto.js"></script>
<script language="javascript">
jQuery(document).ready(function(){
jQuery("#myController").jFlow({
slides: "#mySlides",
width: "291px",
height: "217px",
duration: 700,
auto: true
});
});
</script>

<script src="ajax/lib/prototype.js" type="text/javascript"></script>
<script src="ajax/src/scriptaculous.js" type="text/javascript"></script>
<script src="ajax/src/unittest.js" type="text/javascript"></script>


Oder diesen:

<script type="text/javascript">
jQuery.noConflict();
var options = {
zoomWidth: 300,
zoomHeight: 300,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'medium',
title: false,
lens: true,
xOffset: 20,
showPreload: true,
preloadText: 'Zoom-Funktion lädt...',
preloadPosition: 'center'
}
jQuery(function() {
jQuery(".jqzoom").jqzoom(options);
});
</script>

<script src="ajax/lib/prototype.js" type="text/javascript"></script>
<script src="ajax/src/scriptaculous.js" type="text/javascript"></script>
<script src="ajax/src/unittest.js" type="text/javascript"></script>


Die Entwickler solcher Tools leben von Spenden.
Sollten Sie diese Funktion in Ihrem Shop nutzen, so klicken Sie bitte HIER!.
Ganz unten auf der Seite kann man eine kleine (freiwillige) Paypal Zahlung an den Entwickler senden.


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,