Jquery Zoom [Support thread]

niccol:

Honestly I am fitting comments in while a database uploads so ignore me if I am wrong but I seem to remember that if there are three images then there will be the main one and three thumbnails. If there is just one image I think there should be the main one and no thumbnails. I think at the moment it still shows the thumbnail of the one image which is a bit redundant.

Just needs a change to the logic. I have that somewhere but it is probably just as quick to rewrite as to find it :-)

doesnt on mine.. :O)

looks like I need to use the varibale:

$products_image_directory

instead of using DIR_WS_IMAGES when checking for the image in the file

includes/modules/YOUR_TEMPLATE/additional_images.php

try changing this:

//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(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
  $products_image_medium = DIR_WS_IMAGES . $file;
} else {
  $products_image_medium = DIR_WS_IMAGES . 'medium/' . $products_image_medium;
}


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

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

//end added image checking

to this:

//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

make sure you create a backup copy, not actually tested this, just off the top of my head..

Ha ha!

I found the code!

if(sizeof($images_array))
{
	// add in main image
	$im = explode('/',$products_image);
	$im = array_reverse($im);
	
	$images_array[] = $im[0];
}

I must have included that at some point. But there is a weakness there because of the way it uses explode. It will not account for sub-directory use.

Not sure why I didn't just use $products_image_base. Maybe that doesn't have the extension? Need to go through the logic and check.

@chad

let me know if that ammendemnt above works for you.

@chad looks like you got it sorted?

Have you changed the js or css settings? How comes your zoom is set away from the main image?

philip937:

@chad

let me know if that ammendemnt above works for you.

philip:

VERY close:

http://96 .30. 58.67/index.php?main_page=product_info&cPath=6_110&products_id=460

You'll notice that I the image swaps, and jqzoom works (correctly) , but the base image doesn't resize to the dimensions of the swapped image... did I explain that right?

Is this a situation where additional images would have to be the same "shape" as the main image?

-chadd

Hmm not sure I completely follow.

I would suggest for it to work properly all images should be to the same scale otherwise some would appear to be zoomed and others not.

Again not sure why your zoom window is not the main image area as it should be?

In other words to me it looks like you have set your zoom window to a value you have chosen and your additional images are actually smaller than the window. That make sense?

he is not using 'innerzoom' in the initialisation.

I would suggest that if you don't want a zoom feature to go for image handler if you just want lager images to show when you hover.

If you really want the zoom effect then use the inner zoom so that it actually appears that you are zooming the in on the image in the main product image position

philip937:

As promised, here is the file set. Should work with a clean install of ZC 1.5.1.

It should handle all variations of image sizes in the directories you have, for example

if you only have small images in your main image directory, you simply just need the actual image size larger than the value set for your product listing image for the zoom to appear to work.

If you have small and medium images, you simply need to ensure that your actual medium image size is larger than that set in for your product info page.

If you have small, medium and large images, you product info page will as per zen carts logic will show your medium image size and will then zoom to the size of your large image size.

I added an additional file to this file set:
/includes/modules/YOUR_TEMPLATE/main_product_image.php

The reason for this is explained here:
http://www.zen-cart.com/showthread.php?205668-Possible-Bug-includes-modules-main_product_image-php
however this file should be optional. I just found that the logic wasn't working correctly when only small and medium images were present when the large link is built.

Nick,
I would be greatful if you could help finishing what I think is the only thing left to do on this, which is to make the additional image link a proper <script> document.wrtite ...

I think its going to be an escaping nightmare but as we spoke about before, good practice to ensure Java disabled browsers do not see the images twice.

Ta.

Phil :clap:

Phil anyway you could zip your latest set of files. I used the zip file from the above post on Zen 1.5.1, and I can't even get the cross hair to appear on the main image. When I click on the main image, it goes to a new browser tab showing that image. What am I doing wrong?
I compared my page source, and I don't have "jscript_jquery-1.6.js" loaded. Is that whats causing it?

Kevin205:

Phil anyway you could zip your latest set of files. I used the zip file from the above post on Zen 1.5.1, and I can't even get the cross hair to appear on the main image. When I click on the main image, it goes to a new browser tab showing that image. What am I doing wrong?
I compared my page source, and I don't have "jscript_jquery-1.6.js" loaded. Is that whats causing it?

Yes you need to load the jquery library. Sorry mate this isn't yet an official mod (not this flavour anyway) so instructions are a but vague currently.

Hi!

Actually, the additional images image dimension are there, so when the image swaps on click, it should be possible to update the main image dimensions... correct?

I like the zoom I'm using better than innerzoom...

Also, I just noticed that when I disable javascript, the additional images double-up. The main image doesn't.
The larger image links DO work correctly for the additional images.

chadderuski:

Hi!

Actually, the additional images image dimension are there, so when the image swaps on click, it should be possible to update the main image dimensions... correct?

I like the zoom I'm using better than innerzoom...

As far as I'm aware the zoom isn't 'actually' zooming, it's simply displaying the actual image size. Hence why you have to have the main image dimension settings less than that if the actual image size (unless using the zen cart small medium large structure).

You zoom window is bigger than your additional image sizes.. Make the window smaller.

Philip,

I think we're focusing on two different things. I know the additional images are less than the zoom size, but still larger than the thumbnails displayed. That's something I can improve upon later.

The main products image isn't the same dimensions as some of the additional images. I trying to figure out how to have the main product image display correctly.

Also, I noted above, when java is disabled, the additional images show twice.

-chadd

Oh I see, sorry. Again it looks like you main image size is different dimensions so you probably have your image settings to restrict height and width. If you want the correct proportions try setting either width or height to 0 in your admin?

@chadd

I think I mis understood your problem.

Are you saying that you are expecting that when you click on the additional images they are assuming the same dimensions as the main image and that you don't want this and that you want the dimensions to change to suit the additional being viewed?

philip937:

@chadd

i think i mis understood your problem.

Are you saying that you are expecting that when you click on the additional images they are assuming the same dimensions as the main image and that you don't want this and that you want the dimensions to change to suit the additional being viewed?

yes, exactly! ;p

I'm trying to figure it out, but I'm really playing catchup here!

Hmm ill have to have a play. All my images are all the same dimensions to keep everything all uniform. I'm a bit anal like that! Ill have a play with some random size images and see if there is a way but its probably not possible because the swap is done with the gallery attribute set on the main image so it probably just overlays the image in the space (dimensions) of the main image.

philip937:

Hmm ill have to have a play. All my images are all the same dimensions to keep everything all uniform. I'm a bit anal like that! Ill have a play with some random size images and see if there is a way but its probably not possible because the swap is done with the gallery attribute set on the main image so it probably just overlays the image in the space (dimensions) of the main image.

If you point me to the right area of code, I'll look also...