Jquery Zoom [Support thread]

[Kevin205]

Phil - You might be busy, but i had to ask the questions.

If you have multiple images (2-3) on your products info page, do they show as intended with jqzoom?
1. main image zoom-able, from medium to large?
2. smaller images enlarged to medium inside of the main product image once click on, from small to medium. And zoom-able as you hover over them, from medium to large?

[Kevin205]

I am still trying to get this to work.
For a product with a single image, jqzoom functions perfectly. Having images in the following structure:
Small image: images/Image01.jpg
Medium image: images/medium/ Imager01_MED.jpg
Large image: images/large/ Imager01_LRG.jpg

-For any products with more than one image, when product page shows up, main image shows up as (medium size, good quality image) and when I hover over it, I get the zoom effect.

When I click on the second image, or any of the other thumbnails, the image shows up as low res (it seems that it is enlarging the small image to fit the main image box, when I try to hover over it, it the shows the small image actual size.

So I change the code in jqzoom in /includes/modules/MyTemplate/additional_images.php and removed the comments
From:

//removed below for image swap and jquery zoom logic used from above instead
// $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
$flag_has_large = file_exists($products_image_large);
//removed below for image swap and jquery zoom logic used from above instead
// $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
$flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
$base_image = $products_image_directory . $file;
$thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
$thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
$large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

TO:

//removed below for image swap and jquery zoom logic used from above instead
$products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
$flag_has_large = file_exists($products_image_large);
//removed below for image swap and jquery zoom logic used from above instead
// $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
$flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
$base_image = $products_image_directory . $file;
$thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
$thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
$large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

Now on a multi-image product, when thumbnails are clicked, it shows a blured version of the clicked image in the main product image, I think it is enlarging the small image again. And when I hover over it, it now shows the large image.

Why am I getting the small image, enlarged when I click on any of the thumbnail?

Help

[Kevin205]

What area of the code, php handles the part, when the thumbnail image is clicked; the thumbnail image is displayed in the main product image area?

When I click on the thumbnail I am getting the small image enlarged, instead of the medium image!

Struggling here and I have to solve this problem.

[Kevin205]

There is an issues with this mod, when sub-directories are created under image folders small(root of image Dir), medium and large.

With a fresh install of Zen 1.5.1 files, when the small, medium & large image are at the root and not in a sub-directory, everything works fine. But as soon as I want to organize the images and add a sub-directory (for different manufacturers), the links break.

Zoom Works Perfectly, small thumbnails, medium and large images, as well as image swapping and zoom effect. With the following directory structure:
Small images:
images/ImageA.jpg
images/ImageA_01.jpg
Medium images:
images/medium/ImageA_MED.jpg
images/medium/ImageA_01_MED.jpg
Large images:
images/large/ImageA_LRG.jpg
images/large/ImageA_01_LRG.jpg

html code view:

<div class="additionalImages centeredContent back" style="width:50%;">
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/medium/04098_01_MED.jpg',largeimage: 'images/large/04098_01_LRG.jpg'}"><img src="images/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&amp;pID=2&amp;pic=0&amp;products_imag e_large_additional=images/large/04098_01_LRG.jpg" target="_blank"><img src="images/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>

Issue 1
Zoom fails to function and it does not work, when directory structure is as follow:
Small images:
images/Manufacturer_Name/ImageA.jpg
images/ Manufacturer_Name /ImageA_01.jpg
Medium images:
images/medium/ Manufacturer_Name/ImageA_MED.jpg
images/medium/ Manufacturer_Name/ImageA_01_MED.jpg
Large images:
images/large/ Manufacturer_Name/ImageA_LRG.jpg
images/large/ Manufacturer_Name/ImageA_01_LRG.jpg

html code view:

<div class="additionalImages centeredContent back" style="width:50%;">
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/zcy/04098_01.jpg',largeimage: 'images/zcy/04098_01.jpg'}"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&amp;pID=2&amp;pic=0&amp;products_imag e_large_additional=images/zcy/04098_01.jpg" target="_blank"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>

With the above code:
- I get the thumbnails
- Image swap works
- Once the thumbnail is selected, small image shows up in main product image area and when hover over it, small image is displayed.

I am trying to figure out, what area of the code controls the output of the medium and large images above. And which part fails to add the proper directory path?

Issue 2
I have also found out, when I remove the comment from additional_images.php at around line 135

//removed below for image swap and jquery zoom logic used from above instead
$products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;

html code view:

<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/zcy/04098_01.jpg',largeimage: 'images/large/zcy/04098_01_LRG.jpg'}"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&amp;pID=2&amp;pic=0&amp;products_imag e_large_additional=images/large/zcy/04098_01_LRG.jpg" target="_blank"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>

With the above code:
- I get the thumbnails
- Image swap works
- Once the thumbnail is selected, small image shows up in main product image area and when hover over it, large image is displayed (zoom effect happens). Medium image DOES NOT show up.

I would dump all images in one folder, but it would be horrible spaghetti and things will get messy with a lot of images!

Thank you.