Additional Image Hover - jQuery

**delia** · 14 Jul 2011, 12:06 PM

I'm proud to announce the addition of a new mod now available in the contributions section at

http://www.zen-cart.com/index.php?ma...oducts_id=1967

Demo is here: http://zencartdelia.com/testing/inde...roducts_id=180

The product page has been altered to move the additional images underneath the main product image. Then if you hover over those additional images, the main product image changes to that image.

This mod is very lightweight, easy to install, alters no core files and only is called on the product page. The amount of code added is only a few lines in addition to the base jQuery library.

I don't expect folks to need any support but this is the place to ask questions.

If you already have a mod that uses jQuery, you may need to do some special merging.

Most jQuery mods require additional lines of code in the header. Two jQuery mods have to be merged differently than the usual stuff so that may well be your question.

Please understand that I'm glad to help you with this mod - but merging it with other jQuery is not part of the support I am offering here.

**Susan101** · 23 Aug 2011, 06:52 AM

This is nearly what I've been looking for.

Do you think that you could add an image zoom the same as is used on Magento websites?

See:

http://www.sharmin.com.au/index.php/...le-silver.html

Also add left and right arrows on the product image like on this website ?

http://www.asos.com/ASOS/ASOS-Crop-T...px?iid=1634460

**delia** · 23 Aug 2011, 12:02 PM

No, I've never even seen those two effects before. This is meant to be a simple mod and it will stay that way.

**Susan101** · 23 Aug 2011, 07:48 PM

Originally Posted by delia

No, I've never even seen those two effects before. This is meant to be a simple mod and it will stay that way.

ASOS is one of the most highly rated ecommerce designs in the world.

The way they handle product images is really user friendly and is it what businesses are now asking for.

Could you change your mod so that clicking a thumbnail changes the main image rather than a hover?

**Susan101** · 27 Aug 2011, 03:36 AM

Here is one on a Zen Cart website. Does anyone know how to make it like that?

http://www.shop.mulberryfundraisers....f-MP810063.htm

**Susan101** · 1 Sep 2011, 04:35 PM

Here is another example of how to show the product images:

http://www.houseoffraser.co.uk/Mango...efault,pd.html

Considering this is used by very highly rated top professional websites, is anyone else interested in doing this, or is it just me?

**delia** · 1 Sep 2011, 05:19 PM

Well, either you do it yourself or pay someone to do it if you want it. I provided the free mod as a courtesy to the community. I actually paid for someone to figure out what I wanted. I've made no money off of it. I do have to make a living.

**Boggled** · 21 Feb 2012, 09:02 PM

Zen version 1.3.9h
Also installed Zen Lightbox and Image Handler 3

Hover works great, but image is blurry. It's not picking up the larger image, only the thumbnail.

Any idea what might be wrong?

**loafer** · 28 Apr 2012, 12:08 PM

I did everything except for uploading these 2 files - product_info_prices.php and additional_images.php

I can't overwrite them as I have changed a lot in these 2 files. I tried to merge them but the main image doesn't change...

Below are the cut html code and would you please let me know what I am missing?

<head>
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/product_info.css" />
<script type="text/javascript" src="includes/templates/custom/jscript/jscript_jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var origsrc = $("#productMainImage a img").attr("src");
$("#productAdditionalImages .additionalImages a img").hover(
function () {
$("#productMainImage a img").attr('src', this.src);
},
function () {
$("#productMainImage a img").attr('src', origsrc);
}
);
});
</script>
</head>

<body>
<div id="productMainImage">
<img src="images/dvd/picture_01.jpg" width="558" height="558">
</div>

<div id="productAdditionalImages">

<tr>
<td>
<img src="images/dvd/picture_01.jpg" width="135" height="135" style="border:1px solid black" />
</td>
</tr>

<tr>
<td>
<img src="images/dvd/picture_02.jpg" width="135" height="135" style="border:1px solid black" />
</td>
</tr>

<tr>
<td>
<img src="images/dvd/picture_03.jpg" width="135" height="135" style="border:1px solid black" />
</td>
</tr>

</div>
</body>

**delia** · 28 Apr 2012, 03:23 PM

You're showing me rows and columns but not table tags - just left them out for this post? There's supposed to be a class of .additionalImages and there has to be a link on the image.

Thread: Additional Image Hover - jQuery

Thread Tools

Search Thread

Display

Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Re: Additional Image Hover - jQuery

Similar Threads

v151 Additional images popup and jquery

Adding Additional Text to Hover Image

disable image handler hover for additional images?

Jquery Fancy Thumbnail Hover Effect on Product page

Adding JQuery Lightbox to additional images

Posting Permissions