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

[Waij]

Waij,
Is this fix working with IH2

Yes i have it installed with IH2 and my images zoom perfect and with additional images they swap. I am by no means a expert or coder, i was desperate to get it working and it does.

With the new version of Jqzoom it did not work even if i made a clean install without IH2. The only thing is that with the code above you have to make the changes like for instance zoomsize in the php file and not in admin. You can however disable it in admin.

[Waij]

Just want to mention that i have tested this in IE, Firefox, Chrome, Safari and Opera and it works well for me.

[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.