Image Swap via Javascript

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.

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.

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

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

?

"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?

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?":cry:

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,

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.

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

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).

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.

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.

Ah, I have it sorted out!

Thank you very much. Your time is appreciated.

-Alex

Ok, I've been having problems with the swap image mod and well as have come up with the following, but would like to know if there's an easier way. Client will be updating the cart and need to keep it simple.

I've saved and uploaded the following images and sizes:

in images dir: lucy.jpg 300px w AND saved the same image as lucy_01.jpg at same size to get it to swap as additional images too.

in images/medium dir: lucy_MED.jpg, lucy_01_MED,jpg, lucy_02_MED.jpg all at same size as those in images dir (300px w)

in images/large dir: lucy_LRG.jpg, lucy_01_LRG,jpg, lucy_02_LRG.jpg all at 500px wide.

It seems to work, but is going to be confusing for client.

Other issue I have is that I want whichever image is displayed in the main product image area to be the one that's enlarge-able, not the thumbnails in the additional images area. and can't figure out how to do it.

See http://leatherneckjims.com/shop/index.php?main_page=product_info&products_id=3
(Yes, I know it's butt-ugly, but want to get all modules installed and working before I start on layout customization.)

Thanks, thanks, thanks in advance for any help!

n images dir: lucy.jpg 300px w AND saved the same image as lucy_01.jpg at same size to get it to swap as additional images too.

in images/medium dir: lucy_MED.jpg, lucy_01_MED,jpg, lucy_02_MED.jpg all at same size as those in images dir (300px w)

As you have already decided that the main /images file will be the same file renamed as _MED in /images/medium I think that you can simplify this and not load an image to the medium directory. As I believe that ZenCart will load the base image for the medium bu default when no _MED image is found. This should make it simpler for your client.

ZuluRose:

Ah, I have it sorted out!

Thank you very much. Your time is appreciated.

-Alex

Alex:

I see you have the swap images mod working well on your site. Was the solution to use a medium-sized image as the base image for your products, which will be scaled down to generate thumbnails? I think this is an OK workaround, but this mod was designed to "find" the medium image on a rollover of the small image (this is clear from the mod readme). Using medium images as thumbnails will obviously increase page load times dramatically for products with multiple additional images!

Has anyone gotten this mod to work properly with zen 1.3.7 (i.e. a rollover of a small thumbnail should load the medium image instead of just stretching the thumbnail)?

Thanks!

Matt

HI,

Having a few problems with this mod. Everything with the image sizes is working properly. However im having a problem with the way that the mouseover works in general.
Please see this link

http://www.secretseductions.co.uk/newsite/index.php?main_page=product_info&cPath=1201_1241&products_id=8231

When the page loads up the white image is the main image with the blue 1 as the second image. Once you roll over the blue image it loads up ok, but once you move the mouse off the image it doesnt revert back to its original state.

Any ideas anyone? Im not up on my javascript yet.

Cheers

Paul

Hi,

How did you get the images to work properly. I have read everything about this problem and haven't seen a solution. It appears that a couple of people have figured it out but they haven't shared their fix.

Please pass along any information on how to get this to work. Thank you all for your help.

Amy

Nope...never found a satisfactory solution...switched to the "Lightbox" mod to smoothly display larger versions of my thumbnails.

I actually did finally get this to work. I read in another thread to use the "full size" image at the alternative images. Place those in the "images" folder with all the thumbnail images. They will display as "alternative" images at the smaller size set in the admin. and when rolled over they will display at their regular size. I did make sure my product image_MED (main product image) and all alternative images had the same size width (300px) when I created them and I set that size in the admin and then set the height to "0" so they could all have different heights if necessary.

Anyway, it's working. It crunches the alternative images down to the small size that I set in the admin. (100 x 100). They look o.k. I'm sure if I had more room and set the size for the small images to something larger they would look better but I need to move on to other design issues :flex:

Thank you for the reply.

Yeah, I've had to revert to the default. The trouble is that the using _MED images for both additional images thumbnails and corresponding medium sized images is that the thumbnails look terrible. They're not distorted, but just look really bad quality.

It's a pity because it's a great mod and I had it working really well in its earlier version with 1.2.7, when you could use it with a proper thumbnail.

firefly:

Yeah, I've had to revert to the default. The trouble is that the using _MED images for both additional images thumbnails and corresponding medium sized images is that the thumbnails look terrible.

Yep, not to mention the increased page load times required to download medium-sized versions of all the thumbnails!