Product Listing Image Swap

I've found several mods that do all sort of nifty things when you hover over an image in the product information page but what I'm looking for is a way to display the larger image of a thumbnail when hovering over it in the Product Listing Page. You know, the page you go to when you click on a category.

Here is what I have and what I want to do;

When I click on a category it displays product thumbnails 3 columns wide on the right side of the page and on the left side of the page it shows the category image.

Something like this:

x x x --------------------
x x x | category image |
x x x --------------------

(sorry for the rudimentary example).

What I want is when I hover over one of the thumbnails on the left it will swap the image on the right with the large version of the thumbnail.

Hope this makes sense. Is there anyway to do this?

Nevermind I've managed to figure this out for my self. In case anyone has a similar need here is how I managed to do this.

Copy includes/templates/template_default/templates/tpl_index_categories.php to includes/templates/YOUR_TEMPLATE/templates and edit line 52 as follows:

Change this

<div id="categoryImgListing" class="categoryImg"><?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?></div>

To this

<div id="categoryImgListing" class="categoryImg"><?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT, 'name="imgSwap"'); ?></div>

Notice the name tag at the end - name="imgSwap", this is the only change. The name can be anything you want but remember it because you will use it again in a minute.

Now copy include/modules/product_listing.php to include/modules/YOUR_TEMPLATE and edit lines 166 and 168 (for some reason these lines are identical).

Change from this

$lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
 

To this

$lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage" onMouseOver=document.imgSwap.src="' . DIR_WS_IMAGES . $listing->fields['products_image'] . '"; width="' . SUBCATEGORY_IMAGE_TOP_WIDTH . '" height="' . SUBCATEGORY_IMAGE_TOP_HEIGHT . '"') . '</a>';

Basically you are adding the following right afer the class tag:

onMouseOver=document.imgSwap.src="' . DIR_WS_IMAGES . $listing->fields['products_image'] . '"; width="' . SUBCATEGORY_IMAGE_TOP_WIDTH . '" height="' . SUBCATEGORY_IMAGE_TOP_HEIGHT . '"'

Be very careful with the quotes, if you don't get them right it won't work. You can just copy/paste this code.

Note the document.imgSwap.src, you will need to use whatever name you used in the other file in this tag, so it would be document.NAME.src.

That's it. Hope it works for you, enjoy.

Allen

Can you post url of example where your mod works?

I've found several mods that do all sort of nifty things when you hover over an image in the product information page but what I'm looking for is a way to display the larger image of a thumbnail when hovering over it in the Product Listing Page. You know, the page you go to when you click on a category.
Sound exactly like what ImageHandler2 does, looks like you were trying to reinvent the wheel.

misty:

Can you post url of example where your mod works?

Unfortunately it's a members only website. You must be approved by the owner to shop so you wouldn't be able to see the products or how this works.

Sorry.

yellow1912:

Sound exactly like what ImageHandler2 does, looks like you were trying to reinvent the wheel.

My understanding of ImageHandler2 is (and I may be completely wrong on this and if I am where were you when I was searching for an answer :huh:) is that when you hover over a thumbnail you get a larger image that kind of floats next to your pointer. This isn't what I needed.

I needed a larger image of the thumbnail displayed in a specific place on the page.

If you just make a small change to the jscript and the css of IH2 you should get exactly what you want as well.

But anyhow, you get it now, though through another way, it's all good.

Cheers

These modifications work similar to this:

http://www.locomolife.com/swap%20test.htm.

This isn't my site and is strictly HTML but it demonstrates what I was needing and what the changes I posted will allow Zen Cart to do.

Oh, and I re-read the documentation on ImageHandler2 and it does what they call a fancy float. This is not what I needed.

I should mention that this method used the image for the category. In other words when you hover over a thumbnail it's larger image is displayed in the location where the category image normally would go.

If you need the category image you will need to add a new image div wherever you want to place the thumbnail's larger view.