Jquery Zoom [Support thread]

[damiantaylor]

I have Image Handler 2 and jqlightbox installed and both are working perfectly.
I then installed jqzoom which worked, but the zoomed images are the same size as the large image shown in jqlightbox.
That being the case, it only makes sense to me to install either jqlightbox or jqzoom, not both of them.
If jqzoom could zoom on the original image loaded rather than the image handler large image, I could see the point in both of them. In fact, it would be fantastic!

This is my setup:

I load a product image which is 1500 x 1000 pixels.
I set image handler to display large images as 750 x 500 pixels as I think anything larger than this is too big for most screens to display.

When I click on the image, it is displayed in the lightbox at 750 x 500 pixels which is perfect.
When I roll over the image, jqzoom only zooms the image in to 750 x 500 pixels so it doesn't show any more detail than the lightbox does.

What I would like to be able to do is have jqzoom zoom in on the original 1500 x 1000 pixel image, thus showing the customer much more detail than the lightbox.

Is this possible?

[Waij]

I first installed image handler and then installed jqzoom. I have installed this on zen cart 1.3.9h. I get the following error if my products page is loaded.
invalid XML markup
[Stop on this fault] zoomWidth: <?= JQZOOM_ZOOMWIDTH; ?>,

Can somebody assist me with this.

[novastar]

How do you even load jquery in zen cart?

[bostero_loco]

I'm having the exact same problem using IH2 and Jzoom 1.5.

var options = {
zoomType: "<?= JQZOOM_ZOOMTYPE; ?>",
zoomWidth: <?= JQZOOM_ZOOMWIDTH; ?>,

Uncaught syntaxerror: Unexpected token <

any clues?

[Waij]

I'm having the exact same problem using IH2 and Jzoom 1.5.

var options = {
zoomType: "<?= JQZOOM_ZOOMTYPE; ?>",
zoomWidth: <?= JQZOOM_ZOOMWIDTH; ?>,

Uncaught syntaxerror: Unexpected token <

any clues?

I did a clean install without IH2 and still have the same problem.
What i did is change
<?=JQZOOM_ZOOMWIDTH;?>,
to "<?=JQZOOM_ZOOMWIDTH;?>",

This i did to all that did not have "
The next problem is that the $ is not valid.
I changed the following line on the top from

$(document).ready(function(){ to
jQuery(document).ready(function($){

This is a step ahead, i have preloading but still no image.
Will keep you posted.

[Waij]

I did a clean install without IH2 and still have the same problem.
What i did is change
<?=JQZOOM_ZOOMWIDTH;?>,
to "<?=JQZOOM_ZOOMWIDTH;?>",

This i did to all that did not have "
The next problem is that the $ is not valid.
I changed the following line on the top from

$(document).ready(function(){ to
jQuery(document).ready(function($){

This is a step ahead, i have preloading but still no image.
Will keep you posted.

I got it working:
Just change your jqzoom.php file to this:

<script language="javascript" type="text/javascript"><!--

jQuery(document).ready(function($){

var options = {
zoomType: "standard",
zoomWidth: 200,
zoomHeight: 200,
xOffset: 10,
yOffset: 0,
position: "right",
lens: true,
imageOpacity: 0.2,
title: false,
showEffect: "show",
hideEffect: "hide",
fadeinSpeed: "fast",
fadeoutSpeed: "slow",
showPreload: true,
preloadText: "Loading zoom",
preloadPosition: "center"
};

$("#jqzoomMain").jqzoom(options);

$(".jqzoom, .jqzoomAdditional").click(function(){return false;});

$(".jqzoomAdditional").hover(function(){
var $jqzoomMain = $("#jqzoomMain");
var $jqzoomMainImg = $("#jqzoomMain").children('img:first');
var $thisImag = $(this).children('img:first');

var jqzoomMainHref = $jqzoomMain.attr('href');
var jqzoomMainImgSrc = $jqzoomMainImg.attr('src');

$jqzoomMain.attr('href', $(this).attr('href'));
$jqzoomMainImg.attr('src', $thisImag.attr('src'));

$(this).attr('href', jqzoomMainHref);
$thisImag.attr('src', jqzoomMainImgSrc);

return false;
}, function(){})
})
//--></script>

[haredo]

Waij,
Is this fix working with IH2

[tony_sar]

I got it working:
Just change your jqzoom.php file to this:

<script language="javascript" type="text/javascript"><!--

jQuery(document).ready(function($){

var options = {
zoomType: "standard",
zoomWidth: 200,
zoomHeight: 200,
xOffset: 10,
yOffset: 0,
position: "right",
lens: true,
imageOpacity: 0.2,
title: false,
showEffect: "show",
hideEffect: "hide",
fadeinSpeed: "fast",
fadeoutSpeed: "slow",
showPreload: true,
preloadText: "Loading zoom",
preloadPosition: "center"
};

$("#jqzoomMain").jqzoom(options);

$(".jqzoom, .jqzoomAdditional").click(function(){return false;});

$(".jqzoomAdditional").hover(function(){
var $jqzoomMain = $("#jqzoomMain");
var $jqzoomMainImg = $("#jqzoomMain").children('img:first');
var $thisImag = $(this).children('img:first');

var jqzoomMainHref = $jqzoomMain.attr('href');
var jqzoomMainImgSrc = $jqzoomMainImg.attr('src');

$jqzoomMain.attr('href', $(this).attr('href'));
$jqzoomMainImg.attr('src', $thisImag.attr('src'));

$(this).attr('href', jqzoomMainHref);
$thisImag.attr('src', jqzoomMainImgSrc);

return false;
}, function(){})
})
//--></script>

problem with jqzoom.php is that , it uses php short tag . and if is not working on any install , it might be due to php short tag turned off by your webserver. no matter if is on or off , you should modify your code to use <?php ?> tag.

var options = {
zoomType: "<?php echo JQZOOM_ZOOMTYPE; ?>",
zoomWidth: <?php echo JQZOOM_ZOOMWIDTH; ?>,
zoomHeight: <?php echo JQZOOM_ZOOMHEIGHT; ?>,
xOffset: <?php echo JQZOOM_XOFFSET; ?>,
yOffset: <?php echo JQZOOM_YOFFSET; ?>,
position: "<?php echo JQZOOM_POSITION; ?>",
lens: <?php echo JQZOOM_LENS; ?>,
imageOpacity: <?php echo JQZOOM_IMAGEOPACITY; ?>,
title: <?php echo JQZOOM_TITLE; ?>,
showEffect: "<?php echo JQZOOM_SHOWEFFECT; ?>",
hideEffect: "<?php echo JQZOOM_HIDEEFFECT; ?>",
fadeinSpeed: "<?php echo JQZOOM_FADEINSPEED; ?>",
fadeoutSpeed: "<?php echo JQZOOM_FADEOUTSPEED; ?>",
showPreload: <?php echo JQZOOM_SHOWPRELOAD; ?>,
preloadText: "<?php echo JQZOOM_PRELOADTEXT; ?>",
preloadPosition: "<?php echo JQZOOM_PRELOADPOSITION; ?>"
};

this format will work , and will allow you to use your admin to modify your jqzoom :) .

[websmythe]

Hi,
Is there a fix to get jqZoom and jqLightbox to work together? Like maybe just display the default ZC "larger image" links for lightbox to work with? I have both installed and they work great. Just not together. When I turn on both, Lightbox overrides Zoom and Zoom disappears.

I looked in tpl_modules_main_product_image.php and in tpl_product_info_display.php, and in the original install files, but didn't find anything. (...except code for Lightbox in the Zoom files ???) I tryed searching the forums here. I figure I'm not using the right search string cause I can't find anything.

I installed CJ Loader, then JQLightbox, then JQZoom 1.5.

[d030433]

where can i download the latest version of Jquery Zoom. who can help me, thanks!