Image Swap via Javascript

[ZuluRose]

Ok, I resize all of my images and disabled proportional images.

My image directory path is something like
../images/ (small)
../images/medium/ (medium)
../images/large/ (large)

The mod has no problem loading the small and large images. And when the page loads, the medium is there but is replaced by the stretched small version when I roll over the thumbnails.

[kobra]

As your image file sizes are on the order of 40k I do not see the disadvantage of expanding the small image. But yes the js for this calls the image url and that is the location of the small image

function swapImage(imageURL) {
	if (gImageCapableBrowser) {
		document.imageSwap.src = imageURL;
		return false;
	}

Now that you have standardized the image sizes and proportions it is not as necessary to have proportional images disabled but this set to on should mediate an non-proportionl streching of an image to fit.

[ZuluRose]

Sorry if I am not to java savy, but what should I change to code to?

document.imageSwap.src = ./medium/imageURL;

?

[kobra]

"imageURL" in this instance is in reference to the image that is being moused over and it's location and I do not know of a redirect to change the the reference for js.

As what is happening looks good to me, what is your reason for wanting this to be the medium image?

[ZuluRose]

Hello, to reiterate the problem.

I really don't think that this script is operating properly. Because when the product info page is first propogated the correct Medium image appears, and when the rollover is activated it switches to the *small* versions with the degraded quality.

Attached is a screen grab of what the image looks like on my computer (stretched) and what the medium size image is.

screen grab (of stretched small image)


Proper image from ./image/medium/ on my server


When I compare the two I don't understand your comment that says " As what is happening looks good to me, what is your reason for wanting this to be the medium image?"

My reason is the appropriate image looks professional, while the blurry image .... That is also why my images are a little heavy. Because I am saving the images at a jpeg quality that has little perceivable jpeg artifacts.

The difference between a fast loading artifacted jpeg and a heavy one could cost me sales. So it doesn't bother me, I have plenty of bandwidth.


Thank in advance for all the help you have given me so far. I really appreciate your time.

Hope we can get to the bottom of this.

Kindest regards,

[kobra]

I really don't think that this script is operating properly.

Well it actually is functioning absolutely correctly. As I had posted the js calls the image that is hovered over and that image is the one stored in the /images directory or the small image.

Try this for one image.

Using FTP, delete one image in the /image directory, delete the same image in the medium directory, from the large directory copy this image to your local and upload it to the /images directory...delete it from the large directory.

Now you have one image (large in file size) that will be resized by Zen Cart for all the representations. One image, the same image, sized down versus sized up. See if this helps. As you state that you are not concerned with pageloading times.

[kobra]

Addition...make sure to rename the large image back to it's root name.

[kobra]

My correction...

As these are additional images named with the _01. _02 etc.

Just make them the resolution/size that you want and place in the /images directory (can be the same _MED image renamed).

[ZuluRose]

Ah..
Ok, after following your thinking I get an idea of what the script actually does.

It swaps the thumbnail(s) from the bottom row with the main image. That would explain why the swap image was low quality, because the additional images are actually the small images not the medium sized ones.

Which gives me an idea, can I tell zen-cart to display the medium product images for the additional image(s) on the product info page instead of the small images?

This would to be one possible solution.

The other solution which I just uploaded is to make the small and medium images be the same. Which eats more bandwidth, because I just noticed that my _MED and small images on the server weren't even compressed. Sorry I totally missed your comment on the file size being large. The compressed versions should be around 10k each.

[kobra]

Which gives me an idea, can I tell zen-cart to display the medium product images for the additional image(s) on the product info page instead of the small images?

Did you miss my last comment??? I corrected myself as these are not the actual "small" images being swapped....they are the "additional" images named image_01.jpg etc. and as a result you only require one image for this (not a small, medium, large) These are only used for displaying the additional images with no "click to enlarge"...So just use what would be a file sized for the medium image and place it in the base /images directory. Zen will downsize it to fit the smaller additional image area and when moused over it will expand to it's normal larger size.