Пересвязать плагин jquery с селектором после изменения свойства?

Question

Я создал довольно простую галерею для страницы продукта. Продукт может иметь несколько изображений, поэтому я решил разместить большое изображение сверху и показать миниатюры внизу. Когда вы нажимаете на миниатюры, большое изображение будет обновляться, чтобы показать увеличенную версию миниатюры. Это все работает отлично. Проблема в том, что я хочу использовать плагин jQuery под названием loupe, который добавляет увеличенную функциональность к изображению. Это вроде работает, но когда я изменяю показанное изображение (щелкая по миниатюре), плагин loupe не распознает изменение источника и по-прежнему показывает предыдущее изображение как наложение.

См. Этот код: http://codepen.io/vobpler/pen/klfEbРедактировать: ссылка jsFiddle в приведенном выше случае не работает: http://jsfiddle.net/c8bXE/

Вот моя разметка:

<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>

Есть ли способ "разгрузить" лупу и повторно прикрепить ее после изменения показанного изображения? Я попытался просто повторно применить его после изменения источника, но это ничего не сделало.

Answer 1

Посмотрев на код плагина и сделав некоторую проверку, я понял, что вам просто нужно добавить следующую строку в конце вашего fullImg.load() обработчик:

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

Смотри рабочую скрипку