Jquery Zoom [Support thread]

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.

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.

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

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

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

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.

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.

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.

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.

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>

"

<?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?main_page=product_info&cPath=22_47&products_id=549

It doesn't seem working..:no:

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?main_page=product_info&products_id=549

@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

Just installed fine on a site I am building. Well, OK I had forgotten a css file but that is now rectified. The more complete version is attached.

Looking at your site I suspect that the reason it doesn't work is the version of jQuery that is loaded on the site. That is an OLD version :-) Some of the stuff that jqzoom use were introduced in version 1.2.6 . That was a long time ago.

You need to update your version. You can download a recent version easily enough but I would think about using a version from a CDN - either jquery themselves or google. If you search for something like 'loading jquery from google' you'll find information. Others may disagree with this but to me it makes more sense.

And for anyone else trying this - you will need to have jQuery loaded on the site one way or another. That is not included in the files so you will have to make it happen if it is not already loaded.

niccol:

Just installed fine on a site I am building. Well, OK I had forgotten a css file but that is now rectified. The more complete version is attached.

Looking at your site I suspect that the reason it doesn't work is the version of jQuery that is loaded on the site. That is an OLD version :-) Some of the stuff that jqzoom use were introduced in version 1.2.6 . That was a long time ago.

You need to update your version. You can download a recent version easily enough but I would think about using a version from a CDN - either jquery themselves or google. If you search for something like 'loading jquery from google' you'll find information. Others may disagree with this but to me it makes more sense.

And for anyone else trying this - you will need to have jQuery loaded on the site one way or another. That is not included in the files so you will have to make it happen if it is not already loaded.

Hi Niccol,

I have made a test to remove all javascript in my webstore, only run your jscript_jquery.jqzoom-core.js & jscript_jqzoom_init.js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>M-Audio Q40 Studiophile Closed-Back Headphones [Studiophile-Q40] : MMO Music Store, Great Price! Great Products!! Great Service!!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="M-Audio Q40 Studiophile Closed-Back Headphones [Studiophile-Q40] Amplifier Guitar Effects Live Sound System Recording Keyboard & Piano Drum & Percussion Accessories DJ Tools Redemption Item Effect ecommerce, open source, shop, online shopping" />
<meta name="description" content="MMO Music Store M-Audio Q40 Studiophile Closed-Back Headphones [Studiophile-Q40] - Closed-back circum-aural design delivers excellent isolation from ambient noise.Whether you're tracking, mixing or listening, you can expect sonic accuracy from your Studiophile Q40 headphones-designed by M-Audio, leading provider of reference monitor technology. With professional-grade dynamic drivers and ear cups that completely surround the ears, the Q40 headphones deliver full-range specs " />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com eCommerce" />

<base href="http://mmo.net.my/storev2/" />
<link rel="canonical" href="http://mmo.net.my/storev2/index.php?main_page=product_info&products_id=385" />

<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" href="includes/templates/all_business/css/stylesheet_jquery.jqzoom.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/all_business/css/print_stylesheet.css" />
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jquery.jqzoom-core.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jqzoom_init.js"></script>
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="includes/templates/all_business/css/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="includes/templates/all_business/css/ie7.css" /><![endif]-->
</head>

<body id="productinfoBody">

<div id="mainWrapper">



<!--bof-header logo and navigation display-->

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://mmo.net.my/storev2/">Home</a> | </li>
    <li><a href="http://mmo.net.my/storev2/index.php?main_page=login">Log In/Free Registration </a> | </li>

												
    <li><img src="includes/templates/all_business/images/cart.jpg" class="cart-image" alt="the shopping cart" /><a href="http://mmo.net.my/storev2/index.php?main_page=shopping_cart">Shopping Cart - 0 item(s) - RM0.00</a> | </li>
    <li><a href="http://mmo.net.my/storev2/index.php?main_page=checkout_shipping"><span class="header-checkout">Checkout</span></a></li>
</ul>
</div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

It is still not working.:wacko:

I have make search on the source file to ensure no additional jscript was loaded as well.

Thanks Niccol, a new version of jquery has get it work.

Thanks.

Hi,

I had Jqzoom and JQuery lightbox installed on my 1.3.8a version of zencart and everything was working fine. However, after I upgraded zencart to 1.5, I cannot find Jqzoom and lightbox from my admin configuration menu. And of course they are not working on the upgraded website either.
I tried to re-install both plugins, and checked that the configuration_group table does have Jqzoom and lightbox entries. But they are still not showing up in the admin config menu!
Can anyone give me some pointers on how to fix the problem?
I appreciate it!

@jcat
Modules need to be updates to work with 1.5. There is plenty of information about this on the forum. It sounds as if these have not been.

Simply to see the configuration entries you will need to 'register the page' this will consist of creating an entry in the admin pages table. As I say there is plenty of stuff on the forum about this.

niccol:

@jcat
Modules need to be updates to work with 1.5. There is plenty of information about this on the forum. It sounds as if these have not been.

Simply to see the configuration entries you will need to 'register the page' this will consist of creating an entry in the admin pages table. As I say there is plenty of stuff on the forum about this.

Thanks for the reply Niccol!
I downloaded the two modules from eazyecommerce.com couple years back. Looks like the modules have not been updated there. I also tried to search the forum thread and only saw some zip files/patch for certain solution. Do you know where I could find the complete updated zip for these two modules?

Any help is much appreciated!

I am afraid not. If they are not in the plugins section of this site ( there is a link at the top of the page ) then I really have no idea. I don't actually use either of those modules :-)

Good Day How Can I Get My product Details To look Like Yours?
I Have Image Handler Install But i would like the zoom in feature and extra pics like yours
please help me out. thank you. my website iam working take a look.
http://fashionistaclub.com/
:D

basically that page involves the jq_zoom files that I outlined above and a heavily modified version of tpl_product_info_display.php

ok thanks for your fast reply can you provide me with the tpl file. please send me a private msg to discuss this business. thanks again