PDA

View Full Version : Problem updating magnified image when using Image Power Zoomer with a gallery



nyar
01-05-2015, 10:07 PM
1) Script Title: Image Power Zoomer v1.1

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

3) Describe problem:
I am trying to user Image Power Zoomer v1.1 with an image gallery; the gallery displays a mid size image, along with thumbnails for additional pictures. When a thumbnail is clicked, the mid-size image is updated, but the magnifier shows a zoomed in view of the original gallery image. This seems very similar to the issue discussed in this thread: http://www.dynamicdrive.com/forums/showthread.php?63267-Image-Power-Zoomer-problem-on-image-src-change

Here's the code I'm using to try to destroy & recreate the magnifier as gallery thumbs are clicked. The zoomRefresh function is just there as a workaround as I can't directly add the onClick event to the gallery image tags:



<script type="text/javascript">
jQuery(document).ready(function($){
$('.gallery-image img').addpowerzoom({
defaultpower: 3,
magnifiersize: [150,150]
})

})
</script>

<script type="text/javascript">
var x = document.querySelectorAll('ul > li > img');
var i;
for (i = 0; i < x.length; i++){
if (x[i].addEventListener){
x[i].addEventListener("click", zoomRefresh);
} else if (x[i].attachEvent){
x[i].attachEvent("onclick", zoomRefresh);
}
}
function zoomRefresh(){
ddpowerzoomer.$magnifier.outer.remove();
ddpowerzoomer.$init(jQuery);
}
</script>