Jquery Zoom [Support thread]

[Kevin205]

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.

[philip937]

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.

[Kevin205]

Busy is great. Happy Sunday.

[chadderuski]

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_...oducts_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

[chadderuski]

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

[philip937]

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.

[Kevin205]

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.

[philip937]

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.

[Kevin205]

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&amp;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>&nbsp;</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&amp;pID=15&amp;pic=0&amp;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.

[Kevin205]

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.