[SOLVED] Re-bind jquery plugin to selector after property change?

Re-bind jquery plugin to selector after property change?

I've created a fairly simple gallery for a product page. A product can have multiple images, so i decided to put a big featured image above and show thumbnails below. When you click the thumbnails, the big featured image will update to show the bigger version of the thumbnail. That all works fine. The problem is i want to use a jQuery plugin called loupe, which adds magnifying functionality to the featured image. It kind of works, but when i change the featured image (by clicking a thumbnail), the loupe plugin doesn't recognize the source change, and still shows the previous image as an overlay.

See this codepen: http://codepen.io/vobpler/pen/klfEb Edit: jsFiddle link in case above isn't working: http://jsfiddle.net/c8bXE/

Here's my markup:

<div class="featured">
    <a href="">
        <img src="" alt="">
    </a>
</div>

<div class="thumbnails">
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
</div>

Is there any way to "unload" loupe, and re-attach it after the featured image changes? I tried just re-applying it after the source changes but that didn't do anything.

Solution

After looking at the plugin's code and doing some inspecting I could see you just need to add the following line at the end of your fullImg.load() handler:

$('.loupe > img').prop('src', fullSrc);

See working fiddle