If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Image Zoom

On our online store, we currently have a flash zoom tool that we want to do away with. I am looking at a few different JQuery options to put a demo up for the store owners and one of the options I am looking at is this zoom tool.

I am having an issue trying to figure out how to dynamically change the image large that is used.

At page load I load the main large image fine, but if throughout the course of page life I want to change the image large, I cannot..or atleast have not found out how.

after the initial page load, to try and update that large image, it tells me Error: Object doesn't support property or method 'addpowerzoom'

Is there something I am missing to update the large image that was first used through your tool?

Thanks,

Rick.

(Sorry, I don't have a demo of your tool in use as it is only in our test environment at the moment, I provided the link to a production page in order to give an idea of what it needs to do...minus the flash zoom set up.)

I have it working now with the multiple images, however I need to see if there is a way to update the large image from another source? Specifically a dropdown.

I am providing a way for the users to click on the image to change the large image, but if a user choses a color from a dropdown, we have code in place that changes the middle sized image but it also needs to update the large image so they can mouse over the middle image and have the large image changed to the correct one.

At the moment, the code is on our test server so won't be able to post up a link at the moment.

Might be able to get something up when i get back to the office on Monday.

I am using the demo 3 type now and it works great if you click the thumbnails.

Essentially for example, we will display all the color choices as thumbnails, so let's say there are 4 of them.

Those 4 thumbnails are dynamically loaded and once clicked, the middle and the large images are changed.

The problem is, we also have a dropdown on the page that has all the combinations of products, including size. Once an option is selected in there, it changes the middle sized image, but it also needs to trigger the changing of the large image in case they mouse over it.

I actually had this "partially" working. I altered the jquery from the script you provided so it loads the large image url that is provided by either clicking the thumbnail or selecting a new drop down choice and as soon as you mouse over it is suppose to update it.

The way I have it working now, if you select a drop down choice and then mouse over the middle image, it updates the large image the FIRST time, but then never again.

Clicking the thumbnails always updates it, but using the dropdown only works on the first selection on the first mouseover.

OK, I have a better idea then. But it would probably be easier to adapt what you have then try to imagine all the code you're using or that could be used.

What I'm thinking is that you have small thumbnails for the other images that you want, give them all a common class that styles them as visibility hidden, and give each one a unique id. Then for the drop down have that execute a:

jQuery('#uniqueid').trigger('click');

of the required thumbnail. That should load up the mid and large sized image for that hidden thumbnail. If you need the small thumbnail to change as well, that can probably be arranged, the hidden thumbnail could become visible and the one it is replacing become hidden. But that last part might be a bit more complicated.

Easier might be to replace the entire set of visible thumbnails with another. So you would have a set for each thing in the drop down.

I'm getting ahead of myself. I really need to see what you have so far before going further.

When you land on the page, before mousing over or clicking anything, select an option in the dropdown, a pink or blue color / size combo for example.

Then mouse over the middle image to the left of the dropdown.

It should display the color you choose in the dropdown in the zoomed image.

If you make any other choice it will continue to show the first choice you made in the zoom.

If you click a thumbnail, that works fine. As soon as you make ANY choice that sets the large image, I cannot get the large image to be updated anymore unless I do it through the thumbnail clicks.

I need a way to update the large image either by mousing over, or by making a selection in the dropdown.

I have tried triggering click events via jquery but I have not been successful with that, some of the research I have done seems to suggest that browser security doesn't allow simulating a user clicking, but I may just be doing something wrong.

We should let the multizoom script take care of things, rather than try to duplicate its workings because there's a lot that has to be changed besides just the src attributes of an image or two. Oh, and you're right about triggering a click on a link, in many cases it's blocked or even impossible to begin with. That's not what I was talking about. I want jQuery to trigger (execute) the event that it previously assigned to the thumbnail links for when they are clicked, not to actually click them.

OK, I've found something workable for that page. It depends upon somethings about that page being constant across the various pages you want to try this on. If you don't understand one or more of these conditions, ask questions. If you know they will not be met, let me know which one(s) and we can try to find a workaround, there probably will be one.

The first condition is that there's an array on the page called images. The comments show that it is generated by aspx, that's fine. The images in it are repeated and there are only four distinct ones. these four are the same images that the thumbnails load into the mid-sized image. Now there can be more or less than four distinct images, but they all must be ones that the thumbnails would load. The ones the thumbnails will load are the href's of the thumbnail links. So there must be one thumbnail link for each distinct image listed in the array.

Second, the generated images array lists the full URL to these images, while the href attributes of the thumbnail trigger links only list the relative path. This is fine as long as the page has a base href tag on it:

Code:

<BASE href="http://www.rockymountaintrail.com/">

like this one does that completes the href in the same way that these images are listed in the generated images array. Alternatively, the full URL can be listed as the href attribute for the thumbnail trigger links. The important thing is that if the images are listed one place with the www. part and the href resolves without it, there will be problems.

Third, the id of the drop down (ddlOptions), and the class names of the thumbnail containers (imgProduct thumbs) cannot change.

Keeping that in mind, here's what to do. Remove or comment out this line:

Code:

imgTag.src = images[myDD.selectedIndex-1];

from the change_dd() function.

Then using a text only editor like NotePad, edit the ZoomTool.js file adding the highlighted as shown (scroll the code block to see it):

The browser cache may need to be cleared and/or the page refreshed to see changes.

Notes:

You don't need to have a separate class="imgProduct thumbs" div for each thumbnail, they can all go in one. But it's OK how you have it.

Ordinarily the code I'm having you put inside the main multizoom script could go anywhere, but because of the way the page is organized, it's best to put it there. It might not work if it goes somewhere else. It will not hurt pages that have no drop down.