Jquery Zoom [Support thread]

[tony_sar]

Can anyone confirm this thing works. I installed this and it doesn't work. And I have yet to find a working example. I have Image Handler and Lightbox installed also. It actually broke Lightbox

I designed a site using jqzoom , no image handler or light box .. and is working , zc version 139h. some modification needed to jqzoom file as i mentioned in previous post

[day2]

I designed a site using jqzoom , no image handler or light box .. and is working , zc version 139h. some modification needed to jqzoom file as i mentioned in previous post

Hi there

I have installed on zen cart 139h, no additional image plug in, will all business template.

It has overridden the zen cart image basic function like view large image, all the default related image and click for large image button has gone. The worse thing is, the zoom image doesn't appear.

I realized the jqzoom version 1.7 no longer come with short tag as mentioned. But it still doesn't work. I have checked the installation many times and no clue what has it gone wrong. able

This is what i have in the jqzoom.php:

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






CJ loader installed as well.

I got my copy of Jqzoom here:
http://eazyecommerce.com/platforms/z...es/jquery-zoom

I hope somebody can help me.

Thanks

[Get Em Fast]

If some javascript guru would help me out, I would really appreciate it. Take a look HERE. See the Main Image? It Zooms nicely with the JQZoom. It ALSO shows AND swaps the images via DrByte's "Swap Images via MouseOver or Click".

Now, the problem(s) is:

Once the Additional Image is 'swapped' with the Main Image, if you hover over the Main Image (which now shows one of the Additional Images), the Zoom feature shows the wrong image..........see?.............it's the ORIGINAL Main Image that displays in the Zoom window.

Maybe somebody could look at the site and give me any pointers?

Another thing is, is that while most of this is working correctly, this site also has IH4 installed on it. When in Admin>Images, you select to zoom small images, it TOTALLY KILLS all display of the Additional Images.


ANY ideas will be tried, reported back on, and once completed, I'll zip everything up as a new Zoom/Swap module.

Thanks,
Robert

[Get Em Fast]

Hmmm..........anybody???

[niccol]

I do not want to get in too deep here because they are not mods I use. But ...

The more recent versions of jqzoom ( the actual module rather than the zen cart module ) handle image swapping just fine. I have used it on a few sites with no problems. Somewhere there is a thread where I posted the code that I used but I have neither the time or the inclination to turn it into a formal 'module'. It is probably easier to use that feature to swap images than to hack two modules together.

But if you want to go the route of hacking two together then you need to understand that the zoom action is bound to the hover event when the document loads. If you swap the images then you need to re-bind the event. If that is all greek then ....

The only issue with IH is that the images need to exist before the zoom is triggered. They can't be created 'on the fly' at that stage. The solution is to pre-load the images at the bottom of the page which is not a bad idea anyway.

[day2]

Now, the problem(s) is:

Once the Additional Image is 'swapped' with the Main Image, if you hover over the Main Image (which now shows one of the Additional Images), the Zoom feature shows the wrong image..........see?.............it's the ORIGINAL Main Image that displays in the Zoom window.

Thanks,
Robert

You may have already solved the issue because it look fine for me when i browse it. Right zoom image was displayed in zoom once the additional image swap to become main image.

Are you using zen cart 1.5? Might to share with us the working code? I just updated to 1.5 and installed IH4. Really look forward to put in the zoom effects.

[niccol]

Attached is the code that I used to add jqzoom in with image swapping on the additional images. It is not sorted into the correct structure but there is one template, one module and two js files so you should be able to work it out.

It has code edits in it for IH.

As I say you may need to pre-load the large images if you are using scaled large images.

All the settings for jqzoom are in jscript_jqzoom_init.js

[Get Em Fast]

Thanks to all who replied. But the site owner decided to go with commercial software.

So, the original issue is still unresolved, but no longer needed for this particular site.

But, I know this is something that a LOT of people like/want on their sites, so maybe with the help of Nicks attachment, we can come up with a new addon.

@niccol: Thanks for that. I'll look into it. Maybe someday I will have time to mess with it and make that new module. :)

Thanks,
Robert

[day2]

Attached is the code that I used to add jqzoom in with image swapping on the additional images. It is not sorted into the correct structure but there is one template, one module and two js files so you should be able to work it out.

It has code edits in it for IH.

As I say you may need to pre-load the large images if you are using scaled large images.

All the settings for jqzoom are in jscript_jqzoom_init.js

Hi Niccol, thanks for sharing. I have tried on it, unfortunately it crashed with the java script that work for the main page image slider. Anyway to merge or get these script to work together? The Jscript for the slide is as attached.

[day2]

Please forget about the above post. I have sort it out. I have uploard your 2 j script to includes/js folder instead of includes/templates/Mytemplate(Which is AllBusiness I am using)/jscript/

Then i load your 2 java scripts via a php file in includes/templates/Mytemplate(Which is AllBusiness I am using)/jscript/, that come with the main page slide, i.e. jscript_scroller.php.

No more crash in jscript and i can see all jscript should be loaded via my html source:

<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/style_imagehover.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/style_jscroller.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/stylesheet_betterCategoriesEzInfo.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/stylesheet_dotline.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/all_business/css/stylesheet_footer_menu.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/all_business/css/print_stylesheet.css" />
<script type="text/javascript" src="includes/templates/all_business/jscript/jscript_imagehover.js"></script>
<script type="text/javascript" src="includes/templates/all_business/jscript/jscript_jquery.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_textarea_counter.js"></script>
  <script type="text/javascript" src="includes/js/jscroller2-1.5.js"></script>
 <script type="text/javascript" src="includes/js/jscript_jqzoom_init.js"></script>
 <script type="text/javascript" src="includes/js/jscript_jquery.jqzoom-core.js"></script>
<script language="javascript" type="text/javascript"> 

The only problem is, the image zoom and swap doesn't work on my product info page.

I have replaced the additional images.php in "includes/modules/"

and uploaded the " tpl_modules_main_product_image.php" to "includes/templates/all_business/templates/"

Cracking my head to sort this out.