CODEWITHSUNDEEP
javascriptjqueryimage
Shah
Shah

Reputation: 45

jquery zoomer rebind after image source changed by javascript

I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the 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 i am wrong or what's the right way to do it?

Thanks

Upvotes: 0

Views: 298

Answers (1)

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

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

This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is 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>

Upvotes: 1

Related Questions