View Full Version : Image Zoom

04-16-2013, 08:20 PM
1) Script Title: Image Power Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

3) Describe problem:

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.

If you look at one of our product pages:

www. rockymountaintrail.com/The_North_Face/Women's_Half_Dome_Hoodie/AAZX/detail

underneath the zoom launch for flash we have some images of hoodies with different colors. Clicking one of the hoodies changes the big hoodie image, in JS.

With your zoom tool, I want to be able to change the large image that is being used through JS when the JS functions for the small images being clicked is fired.

Any time I do this:

defaultpower: 4,
powerrange: [2,5],
largeimage: src,
magnifiersize: [200,200]

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?



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

04-16-2013, 09:17 PM
More info:

Some of what I said in the previous post might not have been clear.

We deal with 3 image sizes.

The small image that is clicked to change the middle image that the user will mouse over for zoom effect.

A image that is 360 x 360, it is the one the user will mouse over for the effect.

A large image that is 1600x1600 that is the image displayed through the zoom, it is the parameter passed in for that.

When a user clicks one of the small color images, it changes the middle image and also needs to change the 1600 image that the zoom tool uses.

Hope that clears it up more.

04-17-2013, 06:18 AM
See Demo 3 on this page:


04-18-2013, 10:34 PM
Thank you for the help,

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.

Is there a way to update this?



04-20-2013, 03:01 PM
If you follow the instructions on the demo page (it's a different script than the one you originally asked for):


Use Demo 3. I believe it does all that without need of a drop down. And/or a drop down could be modified to use (trigger) hidden thumb links to accomplish that.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

04-20-2013, 10:29 PM
Hi John,

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.

04-20-2013, 11:54 PM
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:


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.

04-22-2013, 06:34 PM
Hi Jon,

I have a little demo out.

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.


Hope that helps,


04-23-2013, 02:36 AM
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:

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

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

// Multi-Zoom Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// requires: a modified version of Dynamic Drive's Featured Image Zoomer (w/ adjustable power) (included)

/*Featured Image Zoomer (May 8th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

// Feb 21st, 2011: Script updated to v1.5, which now includes new feature by jscheuer1 (http://www.dynamicdrive.com/forums/member.php?u=2033) to show optional "magnifying lens" while over thumbnail image.
// March 1st, 2011: Script updated to v1.51. Minor improvements to inner workings of script.
// July 9th, 12': Script updated to v1.5.1, which fixes mouse wheel issue with script when used with a more recent version of jQuery.
// Nov 5th, 2012: Unofficial update to v1.5.1m for integration with multi-zoom (adds multiple images to be zoomed via thumbnail activated image swapping)
// Nov 28th, 2012: Version 2.1 w/Multi Zoom, updates - new features and bug fixes

var featuredimagezoomer = { // the two options for Featured Image Zoomer:
loadinggif: 'spinningred.gif', // full path or URL to "loading" gif
magnifycursor: 'crosshair' // value for CSS's 'cursor' property when over the zoomable image

//////////////// No Need To Edit Beyond Here ////////////////



var rawindex = this.options.selectedIndex,
href = images[rawindex];
$('.imgProduct.thumbs a').each(function(){
if(this.href == href){$(this).trigger('click');}

$('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

$.fn.multizoomhide = function(){
return $('<style type="text/css">' . . .

Save and use that version. That's it!

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


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.

04-23-2013, 02:39 AM
Hi John,

I don't have it up in production, but i think i have this working, so long as I manage a click event from a pure JS change event rather than a jquery change event.

I'll have to figure why it doesn't trigger in the jquery, but in the meantime I can work with it as it is for now.

Thanks for the help,


***Edit***You posted right about when i did, i will look through your suggestions before considering this done***

04-23-2013, 03:03 AM
Hi John,

I just made a quick edit to production and your changes worked great thanks, and keeps it with Jquery, which I prefer.

I have been slowly moving that site away from all the javascript functions on the page they use and trying to move it all to external jquery files, so this is nice.

Thanks again,


04-24-2013, 04:11 PM
Hi John,

Is there an easy way to have the zoomed div placed where the cursor is? Similarly to the first image zoom link I linked to?

My bosses were testing it on an ipad yesterday and noticed they need to click the zoomed image to close it. I wonder if for mobile devices if it might be better to let the zoom fill the cursor box.