jQuery: fire call on fadeIn function

Question

I'm currently using the ImageZoom plugin ( view here ), the plugin is great and works a charm. But for a site I'm working on the images (that you need to zoom into) are being appended to their container via $("CONTAINER_CLASS_HERE").html('...etc , thus aren't present on load (this function needs to stay too), this means though that the ImageZoom() function isn't working, even when calling it inside the fadeIn function.

jSFiddle demo here: http://jsfiddle.net/y2tdaak2/

jQuery:

$(document).ready(function () {
    $('.single-letting-lightbox-image').ImageZoom();

    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").fadeIn();
        $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
            .hide().imagesLoaded(function () {
            $(this).delay(500).fadeIn(500, function () {
                $(this).ImageZoom();
            });

        });
    });

});

Any suggestions on how to get this to work would be greatly appreciated, can't figure it out!

Answer 1

have you tried to callback the function?

$("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").fadeIn();
    $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
        .hide().imagesLoaded(function () {
        $(this).delay(500).fadeIn(500, function () {
            $(this).ImageZoom();
        });
    });
// callback the function to make it work again since the way you do this is not yet loaded
$('.single-letting-lightbox-image').ImageZoom();

});

Answer 2

Here you are a working solution :) http://jsfiddle.net/y2tdaak2/1/

$(document).ready(function () {           

        $("button").click(function () {
            var imgUrl = $(this).data('rel');
            $("#area").fadeIn();
            $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
                .hide().imagesLoaded(function () {
                $(this).delay(500).fadeIn(500, function () {
                    $('.single-letting-lightbox-image').ImageZoom();
                });

            });
        });

    });

You need to call ImageZoom after the image is loaded :)