View Full Version : Help modifying JQuery Image Magnify

10-01-2009, 04:16 AM
1) JQuery Image Magnify

2) http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

3) The script is great! Thank you! I only have one problem with it. I wrote a simple javascript for the onclick method of an image of book. I have a rotate button, that when clicked, did swap frontside of book image to backside of book image and toggle back and forth each time it was clicked. Adding this DD script added zoom, but killed that and I can't understand how to modify it to do both. Or can anyone tell me how to modify my script that just swaps the image using document[img_name].src= to run something in this DD script to let it know it has a new image. I feel like the DD script is cloning the image and thus doesn't know when I've switched it, but I don't know how to get it going right.

The DD script is a little over my head in the java language.
This would be a great additional feature to the script--how you'd do it I don't know.

Can someone help me out?

10-01-2009, 05:12 AM
Do you have a URL to what you have so far? I'm not 100% sure I get the picture at the point.

10-03-2009, 02:09 PM
Sorry, I've been really busy this week. Here is the URL, for a site I am working on.


Zoom works fine of course, but the little circular arrow to the left of the book graphic, when click should toggle front cover/back cover of book. It did work before I added the class=magnify. Is there a way to make both work? It flipped by a simple inline javascript that I wrote called imgrotate. Below is the javascript for that:

//used to toggle from front to back on image clicks
function imgrotate(img_name1,img1_srcside1,img1_srcside2,img_name2,img2_srcside1,img2_srcside2) {
if ( typeof imgrotate.side == 'undefined' ) {
// It has not... perform the initilization
imgrotate.side = 2;
else {
if (imgrotate.side==1) {
else {

} //if defined

if (imgrotate.side==2){
document[img_name1].src = img1_srcside2;
document[img_name2].src = img2_srcside2;
alert(img_name2 + '.src=' + img2_srcside1);
document[img_name1].src = img1_srcside1;
document[img_name2].src = img2_srcside1;

return true;

The alerts are firing off (those are just for debugging), and the circular arrow button image toggles as always from one direction to the other. The images coming up for the book, in the alert(), are the correct image names. I think the zoom script is somehow cloning or doing something such that my script can no longer change the image back and forth.

I would certainly appreciate help getting this going. This is for a new book that is about to be released and I need the page working 100%.



10-03-2009, 08:49 PM
The script disables the default action of the toggler link; in other words, any link with the attribute rel="magnify[imageid]". You can re-enable that, so clicking on the circular link changes the image as well, by commenting out the below line inside the .js file:


However, there is a bigger hurdle to overcome. Once you update the magnify image's src, there's currently no easy way for the script to refresh itself and magnify the new src instead- the old image src continues to get used. This is since the script does most of its work when the page first loads, such as the cloning of the image to magnify, and caches that info. I fiddled with the code a bit to try and change that, though apparently this will require some rather big changes to the script in order to accomplish. Due to this I won't be able to help make the required modifications, at least not until the next time the script is officially updated.

If this is an important feature and it can't wait, you may want to consider posting this request in the DD Paid Work Offers forum to see if anyone wants to take a stab at it.

10-03-2009, 10:35 PM
Thanks for looking. I just did post it in paid section. If someone will do it for a reasonable price then I will pay for it to be fixed. It would be a good addition to this script.