Jquery Zoom [Support thread]

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

[niccol]

ok. probably the best place to put the js scripts that I sent is includes/modules/pages/product_info . That way they will only load on the product info page.

the module you can set as an override at includes/modules/your_template/additional_images.php

the template can go at includes/templates/your_template/templates/tpl_modules_main_product_image.php

then beyond that I'd need to see a URL to tell you why it is not playing.

[day2]

ok. probably the best place to put the js scripts that I sent is includes/modules/pages/product_info . That way they will only load on the product info page.

the module you can set as an override at includes/modules/your_template/additional_images.php

the template can go at includes/templates/your_template/templates/tpl_modules_main_product_image.php

then beyond that I'd need to see a URL to tell you why it is not playing.

Hi Niccol,

OK, i have done the above, and JS script now is only applicable to includes/modules/pages/product info, as i realized inside this folder there is a jscript_main.php. hence i put the following script in this php file

"<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>
"

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: jscript_main.php 5444 2006-12-29 06:45:56Z drbyte $
//
?>
<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></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>

You can see a sample of URL here:

http://mmo.net.my/storev2/index.php?...roducts_id=549

It doesn't seem working..

[day2]

I just realised i do not need to modify the jscript_main.php, i just need to copy the 2 java script files into the "includes/modules/pages/product info" folder

However, the impact is still the same, please look at the URL below to see why it did not load. Really thanks for the help:

http://mmo.net.my/storev2/index.php?...roducts_id=549

[niccol]

@day2

I'll have a look at this as soon as I can. Got to say that I am flat out busy at the moment so it will be a short while. I'll package it up into a proper module at the same time.

Nick