Jquery Zoom [Support thread]

I revised my method of image management to small, medium & large. Everything is working great.

Is there any way to have the zoom deactivated, when there is no large image available? It doesn't look right if you are using the zoom without any zoom effect.

Yeah you could just change the logic in how it checks for the large image. So if the large doesn't exist you would simply set the late image to be the same as the main product image. Glad it's working well for you. I still plan to put some more work into this code if nothing else but to tidy up a bit but am so busy it's not funny at the moment.

Busy is great. Happy Sunday.

Hey Philip!

Can't wait to see what you finally come up with. Here is IH4 and (mostly) your jquery code working on a live site:

http://u-buyrite.com/index.php?main_page=product_info&cPath=2_670&products_id=3983

Thumb nails are handled by IH, but the main image is not. That's your code and zencore code. The image swapping and zoom work really well!

-chadd

Hey Phillip,

I was wondering what I need to change to have the thumbs swap on Hover instead of onclick... I dug around, but am not finding it...

-chadd

hi guys, sorry its been a while, I am so busy rebuilding and revamping my site I havent had any spare time at all. I will defo be coming back here once its all done I promise.

@chad I dont know how that can be implemented sorry.

Hey Phil, I don’t know what I did wrong and I can’t figure out why!

I have 3 images, small (150px), Medium (400px) and large(800px). I have named them as follow:
**
For Small Images**
/images/group_A/04353.jpg, /images/group_A/04353_01.jpg & /images/group_A/04353_02.jpg
For Medium Images
/images/medium/group_A/04353_MED.jpg, /images/medium/group_A/04353_01_MED.jpg & /images/ medium/group_A/04353_02_MED.jpg
For Large Images
/images/large/group_A/04353_LRG.jpg, /images/large/group_A/04353_01_LRG.jpg & /images/large/group_A/04353_02_LRG.jpg

All small images are visible in the product listing page.

When the product_info_page first loads, 04353.jpg shows as main image and the other two images show up as thumbnail (small images). And the zoom effect work on the main image, but when I click on the other images the main image changes to low resolution of the images I have clicked on. When I go on top of the main image to get the zoom effect, the image reduces down to the small size. Same thing happens when I click on all other small/thumbnail images. No more zoom effect. Until I refresh the page and then I get the main image only to show the zoom effect.

I would appreciate your feedback on this. What is wrong here.

Hi Kevin.

Which files are you using? There was a flaw with the last lot I uploaded so I probably wouldn't use them.

I assume you are not using image handler?

I have finished my update to my site at last so hopefully should have some time to spend on this and get a demo site up too.

Thanks for the reply Phil.

I will let you know which files I am using. I am NOT using IH.

Meanwhile, I forgot to mention, I am having this problem with products with multiple images only. On a single image product, zoom functions perfectly.

Following is the page source HTML with multiple products:

<!--bof Main Product Image -->
<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="images/large/TestImages/IMG_0021_LRG.jpg" class="bonzer_zoom" rel="product_info">
	<img src="images/medium/TestImages/IMG_0021_MED.jpg" alt="test" title=" test " width="400" height="300" /></a>');
//--></script>


<noscript>
<a href="http://MyDomain.com/Folder/store1/index.php?main_page=popup_image&pID=15" target="_blank">
	<img src="images/medium/TestImages/IMG_0021_MED.jpg" alt="test" title=" test " width="400" height="300" />
	<br /><span class="imgLink">larger image</span></a></noscript>
</div><!--eof Main Product Image-->
</div><!--EOF DIV Main Product Image-->

<div> </div>
<div><!--BOF DIV ADDITIONAL Product Image-->

<!--bof Additional Product Images -->
<div id="productAdditionalImages">

<div class="additionalImages centeredContent back" style="width:33%;">
      <a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/TestImages/IMG_0021_1.jpg',largeimage: 'images/TestImages/IMG_0021_1.jpg'}">
	  <img src="images/TestImages/IMG_0021_1.jpg" alt="test" title=" test " width="100" height="75" /></a>
      <noscript><a href="http://MyDomain.com/Folder/store1/index.php?main_page=popup_image_additional&pID=15&pic=0&products_image_large_additional=images/TestImages/IMG_0021_1.jpg" target="_blank">
	  <img src="images/TestImages/IMG_0021_1.jpg" alt="test" title=" test " width="100" height="75" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript>
</div>

I have omitted HTML for images 2 and 3, to save space, but they look identical to small image 1.

I am using includes\modules\MyTemp\additional_images.php

//added image checking image swap and jquery zoom
    
    $products_image_extension = substr($file, strrpos($file, '.'));
    $products_image_base = str_replace($products_image_extension, '', $file);
    $products_image_medium = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    $products_image_large = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;


//added for additional medium checking
$second_medium_image_check = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;


// check for a medium image else use small
if (!file_exists($products_image_directory . 'medium/' . $products_image_medium)) {
  $products_image_medium = $products_image_directory . $file;
} else {
  $products_image_medium = $products_image_directory . 'medium/' . $products_image_medium;
}


// check for a large image else use medium else use small

if (!file_exists($products_image_directory . 'large/' . $products_image_large)) {
  if (!file_exists($products_image_directory . 'medium/' . $second_medium_image_check)) {
    $products_image_large = $products_image_directory . $file;
  } else {
    $products_image_large = $products_image_directory . 'medium/' . $second_medium_image_check;
  }
} else {
  $products_image_large = $products_image_directory . 'large/' . $products_image_large;
}
    

//end added image checking  

Let me know if you need to see any other files.

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?

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:unsure:

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.

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&pID=2&pic=0&products_image_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&pID=2&pic=0&products_image_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&pID=2&pic=0&products_image_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.

the $products_image_directory is defined further up in this file and actually this code has not been changed, so I can only assume that you are either organising your files in a way zen cart has never intended or there is a bug in the zencart core code?

this is how it is defined:

$products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
 if ($products_image_directory != '') {
   $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
 } else {
   $products_image_directory = DIR_WS_IMAGES;
 }

check you have this code above in your file. as you can see it gets the image directly from the image file location against your product.

so assumably if on the database it is like this:
images/coats/12345.jpg
then the above code will strip this back to just
images/coats/
which defines the image directory. so there is no reason why this shouldnt be working.

I think I see your problem

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

should it not be:
images/Manufacturer_Name/ImageA.jpg
images/Manufacturer_Name/ImageA_01.jpg
Medium images:
images/Manufacturer_Name/medium/ImageA_MED.jpg
images/Manufacturer_Name/medium/ImageA_01_MED.jpg
Large images:
images/Manufacturer_Name/large/ImageA_LRG.jpg
images/Manufacturer_Name/large/ImageA_01_LRG.jpg

???

From what I have found out so far, the problem is where DIR_WS_IMAGES is replaced with $products_image_directory!

philip937:

the $products_image_directory is defined further up in this file and actually this code has not been changed, so I can only assume that you are either organising your files in a way zen cart has never intended or there is a bug in the zencart core code?

this is how it is defined:

$products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
if ($products_image_directory != '') {
$products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
} else {
$products_image_directory = DIR_WS_IMAGES;
}

> 
> check you have this code above in your file. as you can see it gets the image directly from the image file location against your product.
> 
> so assumably if on the database it is like this:
> images/coats/12345.jpg
> then the above code will strip this back to just 
> **images/coats/**
> which defines the image directory. so there is no reason why this shouldnt be working.



The highlighted in Red is where the problem is. It should show it as **images/medium/coats/** (for medium) or **images/large/coats/** (for large) and it doesn't.  That's why you get all your small images **images/coats/** (Thumbnails) and non of the other, medium or large.

Of-course this matters where you have your directories organized in a certain way, and not when placing all images under, images/, images/medium/ and images/large/.

philip937:

I think I see your problem

should it not be:
images/Manufacturer_Name/ImageA.jpg
images/Manufacturer_Name/ImageA_01.jpg
Medium images:
images/Manufacturer_Name/medium/ImageA_MED.jpg
images/Manufacturer_Name/medium/ImageA_01_MED.jpg
Large images:
images/Manufacturer_Name/large/ImageA_LRG.jpg
images/Manufacturer_Name/large/ImageA_01_LRG.jpg

???

It should be:
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

I am trying to get rid of all $products_image_directory and replace it back to DIR_WS_IMAGES as it was (I think originally intended). I will let you know what happens.

I think your missing the point. If you replace with DIR_WS_IMAGES this will set the directory as /images only and will not use your specified folders.
If you want different folders then you need to use the structure I stated above .

Small
images/your_sub
Medium
images/your_sub/medium
Large
images/your_sub/large

How do you make the main image to center horizontally in the product_info page?

I've looked at every css page that's out there!