jquery zoomer rebind after image source changed by javascript -


i made small image gallery 1 big image along few small ones under neath. there zoomer attached big image , when click on small image replaces big image zoomer shows old image instead of new one

jquery

jquery(document).ready(function($){ //fire on dom ready             $('#myimage').addpowerzoom()             }) 

javascript

function movimg(img){     var bimg = document.getelementbyid('myimage');     bimg.src=img.src; $(document).trigger("ready"); }     

html

<img id="myimage" src="img/abc.jpg"  alt="" /> <image src="thumbnails/xyz.jpg" onclick="movimg(this);" width="73px" style="cursor:  pointer;" /> 

where wrong or what's right way it?

thanks

try call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");

this worked me. looks slight delay happens when change source of image breaks powerzoom. idea call addpowerzoom() after image loaded.

<!doctype html> <html lang="en-au">     <head>         <meta charset="utf-8" />         <script type="text/javascript" src="js/jquery-1.8.2.js"></script>         <script type="text/javascript" src="ddpowerzoomer.js"></script>         <script type="text/javascript">             function movimg(img){                 var bimg = document.getelementbyid('myimage');                 bimg.src = img.src;                 jquery('#myimage').one("load", function() {                     jquery('#myimage').addpowerzoom();                 });             };              jquery(document).ready(function($){                 $('#myimage').addpowerzoom();             });         </script>     </head>     <body>         <img id="myimage" src="img/abc.jpg"  alt="" />         <img id="thumb" src="thumbnails/xyz.jpg" onclick="movimg(this);" width="64px" style="cursor:  pointer;" />     </body> </html> 

Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -