A Question About Image Power Zoomer v1.2

1) Script Title: Image Power Zoomer v1.2

2) Script URL (on DD): I am working on my local PC

3) Describe problem: I want to use your Image Power Zoomer on my local pc for my project. I have an image and some buttons which are changing the src of the image.

Zoomer is working good but because of it is working on document ready function, zoomer always showing the first image even though I click on the button and change the source of the image.

And my question is,

How can I run the zoomer when I click on the button, not on document load?

I try to do that but cannot be successfull.

I would be glad if you can help me.

With my kind regards.

We have lots of zooming scripts here. Which one exactly? Please link to the demo page where you got the script.

Thanks for your replay.

Tle script demo link is http://www.dynamicdrive.com/dynamici...owerzoomer.htm

I would try using remove or replaceWith (both jQuery functions available because this script already requires jQuery). If replaceWith works, great. Otherwise you would have to remove and then append, or before and then remove. The remove command is supposed to kill everything about any element removed using it (like events and attributes assigned via jQuery). So let's say you have something like so:

Code:

---

<div id="imgholder">
<img src="ocean.gif" style="width:200px; height:150px">
</div>

---

And let's say you already initialized it in the head of the page like so:

Code:

---

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('#imgholder, img').addpowerzoom()
})
</script>

---

Later you could run code like this:

Code:

---

jQuery('#imgholder, img').replaceWith('<img src="someother.jpg" style="width:250px; height:175px">');
jQuery('#imgholder, img').addpowerzoom();

---

which would replace that image with another, and then initialize the new image to power zoom.

or maybe you need remove, in which case it would go like so:

Code:

---

jQuery('#imgholder, img').remove();
jQuery('#imgholder').append('<img src="someother.jpg" style="width:250px; height:175px">');
jQuery('#imgholder, img').addpowerzoom();

---

I think I can run these scenarios on the demo page using the console to see if either or both work, and if anything else is required. But I might not be able to test that way.

In any case, do you know how to use the code I just gave you? You could make it a function and/or a click event for some element the user would click on to switch to that new image. Changing back would be like:

Code:

---

jQuery('#imgholder, img').replaceWith('<img src="ocean.gif" style="width:200px; height:150px">');
jQuery('#imgholder, img').addpowerzoom();

---

or (using remove and append):

Code:

---

jQuery('#imgholder, img').remove();
jQuery('#imgholder').append('<img src="ocean.gif" style="width:200px; height:150px">');
jQuery('#imgholder, img').addpowerzoom();

---

Whichever works, assuming at least one of them does, replaceWith is easier if it works, you can keep on changing the image in this fashion whenever you like, to whatever image you like.

Edit: Added later - Just tested this and the replaceWith method appears to work fine.

Hi John,
I am very thankful to you. I tried everything but couldn' t be successfull.
After your suggestion I realize that when I change the src of the image I was tryin to add zoom to the image using:

$('#imgimage').addpowerzoom();

and were getting error.

But when I use

jQuery('#imgimage').addpowerzoom();

I become successful.

Thanks a lot for your help.

Regards.

I was going to make a note about that in my previous post. But didn't want to confuse things. I noticed this was one of the older jQuery scripts from DD. At that time he was making everything jQuery.noConflict(), which meant it was or at least could be compatible with other libraries which used the $ variable and also with other versions of jQuery already on use on the page.

But it also meant you had to use jQuery, not $ when activating/using the script outside of a jQuery closure. If this is the only jQuery script on the page, and you're not using any other libraries or code that need the $ variable, you can get rid of:

Code:

---

jQuery.noConflict()

---

from the main script and use $('#imgimage').addpowerzoom(); even if it's outside of a jQuery closure.