Jquery Zoom [Support thread]

Kevin205:

Shouldl IH mod be installed for this test?

well its needs testing with and with out it. the readme explains how to enable image handler if installed. I need to know if it works.

i just did some testing. i dont think its working so wait out and i'll submit the next files after testing them myself save you wondering if its something your doing wrong. speak soon

ok guys I think I have some bad news. I am pretty sure the image swap part of this mod will never be able to be compatible with Image Handler. the reason is that my understanding is that the IH images are created and cached during the zen image function somewhere, and because the image swap is all handles with the jquery script, all it simply does is creates its own image tag etc. therefore for this reason I will have to make the latest version of the mod a standalone version. Im sorry I cant be of more help than this. Perhaps the guys that created/maintian IH might like to look at the Jquery code and see if they can get it to implement the IHandling bit?

I will post a cleaned up standalone version of this in a couple of weeks.

If you are using the default image to zoom to in IH then it really is not that difficult. (http://goo.gl/GHV7L) IH will create the medium image as the page loads. The default image ( the zoom-to-image) exists because it is the one that you uploaded. This requires the user to be disciplined on the proportions and size of the images that they upload. (Or to put in place a system that scales the image on upload which is a better solution because it stops huge images being stored on the server and never used)

If however, you allow Image handler to create a 'large image' and you want to use that as the zoom-to-image ( which kind of makes sense because it means that the zoom ratio is constant) then you have an issue because the image may, or may not, exist on page load. And the javascript cannot create it. So, as I think I may have mentioned before the solution here is to pre-load the image somewhere else on the page and hide it but use it's source in the zoom tag.

That was my only thought, having the product info page load both medium and large of all image and hide all apart from the medium main image. That would be a solution but its getting messy. What's everyone else think?

I am sure I am missing something here, but I really do not understand why IH is needed. Other than it's use for watermarking and etc.

When I am setting up products with max 4 images.

I am re-sampling and saving the high resolution images to 72dpi and at 1200px X 1200px, which to me is a nice size file for zoom purposes. Each files size is about 199kb saved as JPEG Medium Quality.

• On the product listing display page the images get scaled down to 290px X 290px as per my admin parameters.
• On the Product info page all 4 images get loaded very fast, all together about 800kb (images - Not cached in the browser, when viewed first time).

Just upload one size image. I do not know what kind of problem you might have, when placing 3,000 to 4,000 (12,000 to 16,000 images) products online. Not that this site will have that many products!

Am I missing something here?

Kevin205:

I am sure I am missing something here, but I really do not understand why IH is needed. Other than it's use for watermarking and etc.

When I am setting up products with max 4 images.

I am re-sampling and saving the high resolution images to 72dpi and at 1200px X 1200px, which to me is a nice size file for zoom purposes. Each files size is about 199kb saved as JPEG Medium Quality.

• On the product listing display page the images get scaled down to 290px X 290px as per my admin parameters.
• On the Product info page all 4 images get loaded very fast, all together about 800kb (images - Not cached in the browser, when viewed first time).

Just upload one size image. I do not know what kind of problem you might have, when placing 3,000 to 4,000 (12,000 to 16,000 images) products online. Not that this site will have that many products!

Am I missing something here?

You don't need image handler. We are just trying to develop this so that it is compatible with or without IH. The file set I posted prior to the last works perfectly without image handler. It also works if you have one image or the default image medium and large images

Thanks for the confirmation.

Phil have you dealt with sites running a lot of products using zen?

Kevin205:

Thanks for the confirmation.

Phil have you dealt with sites running a lot of products using zen?

Depends what your definition of lots of products is. My site runs approx 3000 products with about 8000 total variations and image wise about 7,500

Here is an example of how IH works

Client with 2000 products.

They have 40 products per page on the product listing.

Without IH that means that they need to download 40 times 200kb ( roughly) So that is 8000kb of image.

It is a busy site so that page may get requested several times a minute. The bandwidth usage soon builds up. And the page is slow for every user. And google hates the page because large images are being downloaded and then scaled in the browser.

So what IH does is scale each image on the server. So, each image now becomes about 20kb . There are still 40 of them on the page. SO there is still 800kb of images to download for the page. 800kb is far too much but it is a lot better than 8mb. Each page loads faster for each user. You use less bandwidth. And google likes your pages more.

It is a bit of a no-brainer ....

having said that, of course if you upload small medium and large version of every image then IH is not required at all. But most large stores do not want to do that. The largest I work with is about 25,000 products so creating those scaled versions is just a pain in the ####. Particularly when I can get it to be done automatically on the server.

OR you can do what I do an have small images as the default image located in /images approx 15-20k each
Then medium images located in /images/medium approx 30k each then large images in the images/large approx 200k

Image size / quality is totally what you want it.

It takes about 30 mins for me to batch create 3 different sizes of 7,500 images and upload to the site.

Either way one or the other is the best option over using just 1 image and loading that size image for everything so either use the zen image folder sizes or IH.

niccol:

So what IH does is scale each image on the server. So, each image now becomes about 20kb . There are still 40 of them on the page. SO there is still 800kb of images to download for the page. 800kb is far too much but it is a lot better than 8mb. Each page loads faster for each user. You use less bandwidth. And google likes your pages more.

It is a bit of a no-brainer ....

Niccol, for you and other experts, this might be a no brainer! For some of us including myself, trying to put the impossible together, it then becomes a challenge. If something can't work, then you try to compromise.

niccol:

If you are using the default image to zoom to in IH then it really is not that difficult. (http://goo.gl/GHV7L) IH will create the medium image as the page loads. The default image ( the zoom-to-image) exists because it is the one that you uploaded. This requires the user to be disciplined on the proportions and size of the images that they upload. (Or to put in place a system that scales the image on upload which is a better solution because it stops huge images being stored on the server and never used)

If however, you allow Image handler to create a 'large image' and you want to use that as the zoom-to-image ( which kind of makes sense because it means that the zoom ratio is constant) then you have an issue because the image may, or may not, exist on page load. And the javascript cannot create it. So, as I think I may have mentioned before the solution here is to pre-load the image somewhere else on the page and hide it but use it's source in the zoom tag.

Furthermore how do you get IH and zoom to work together in on the above mentioned www? Are you using IH and zoom?

As I say, if you are happy to provide small, medium and large then the discussion is not important. So, everyone can make their own decisions. Really doesn't matter too much.

So now I am just chatting.

The thing is that the software that you use to batch process the images is probably based on GD or ImageMagick which are the modules that the server uses to scale the images. So really what we are saying is the same thing. Batch process the images using GD or ImageMagick. I choose to do that on the server, you choose to do it on your computer. That's the only difference.

The only thing I would say is that for most users it is easier to have the system on the server and not even have to think about it. And it does save you that half hour.

I am overtly not a supporter of IH itself. I have been quite vocal about what I regard as its short-comings. As I have said I use my own version of it that has the advantages that it is not limited to three sizes because many of my stores use more than that, it cleans up better after itself, it doesn't destroy the image name if you are doing SEO stuff with that name and it has a smaller footprint than IH. But IH is the industry standard image handling module for Zen. A LOT of people use it.

philip937:

OR you can do what I do an have small images as the default image located in /images approx 15-20k each
Then medium images located in /images/medium approx 30k each then large images in the images/large approx 200k

Image size / quality is totally what you want it.

It takes about 30 mins for me to batch create 3 different sizes of 7,500 images and upload to the site.

Either way one or the other is the best option over using just 1 image and loading that size image for everything so either use the zen image folder sizes or IH.

I think that's the route I should and will take. Thanks again.

niccol:

As I say, if you are happy to provide small, medium and large then the discussion is not important. So, everyone can make their own decisions. Really doesn't matter too much.

So now I am just chatting.

The thing is that the software that you use to batch process the images is probably based on GD or ImageMagick which are the modules that the server uses to scale the images. So really what we are saying is the same thing. Batch process the images using GD or ImageMagick. I choose to do that on the server, you choose to do it on your computer. That's the only difference.

The only thing I would say is that for most users it is easier to have the system on the server and not even have to think about it. And it does save you that half hour.

I am overtly not a supporter of IH itself. I have been quite vocal about what I regard as its short-comings. As I have said I use my own version of it that has the advantages that it is not limited to three sizes because many of my stores use more than that, it cleans up better after itself, it doesn't destroy the image name if you are doing SEO stuff with that name and it has a smaller footprint than IH. But IH is the industry standard image handling module for Zen. A LOT of people use it.

I agree with your logic. But unfortunately at the moment, IH and zoom together is a no go.

@Kevin

Niccol, for you and other experts, this might be a no brainer!

Sorry, I didn't mean that the way it perhaps sounded. The 'no-brainer' is that you MUST send scaled images from the server. Otherwise it is a loose-loose situation.

The ways to do that are to

-- use IH or something similar
-- upload small. medium. large images

I didn't mean anything other than that.

All IH does is make that process a bit easier. But as Phil says there are other ways around it.

Yes, that site does use IH and it does have this zoom. It was the first one that I did like that and I think it is kind of where this whole thread started in one way, or for me anyway. I suspect that the code that I posted earlier in the thread is taken directly from that site.

niccol:

@Kevin

Sorry, I didn't mean that the way it perhaps sounded. The 'no-brainer' is that you MUST send scaled images from the server. Otherwise it is a loose-loose situation.
Niccol, don't worry we are all trying to help, one way or another. I am always thankful of your help as well. :cheers: :smile:

Is there a limit for the number of characters the image file path name could be?

Image is not showing up, as I look at the page source, the image name is getting truncated at the end.

Yes apparently it is 64 character long in the tables. That's why it was breaking.

I found it here