Zoom effect on AJAX loaded image

[federicovilla]

I'm in trouble trying to apply zoom effect on Masonry image loaded by AJAX. The item is appended to the page but zoom effect doesn't work on added image. Any help to fix this? Thanks

My code in Js is:

$('.image-zoom').magnificPopup({ 
        type: 'image',
        mainClass: 'mfp-with-zoom', // this class is for CSS animation below
        zoom: {
            enabled: true, // By default it's false, so don't forget to enable it

            duration: 300, // duration of the effect, in milliseconds
            easing: 'ease-in-out', // CSS transition easing function 

            // The "opener" function should return the element from which popup will be zoomed in
            // and to which popup will be scaled down
            // By defailt it looks for an image tag:
            opener: function(openerElement) {
                // openerElement is the element on which popup was initialized, in this case its <a> tag
                // you don't need to add "opener" option if this code matches your needs, it's defailt one.
                var parent = $(openerElement).parents("div.img");
                return parent;
            }
        }
    });

The AJAX code that load the appended Masonry Item

jQuery.ajax({
                     type: "GET",
                     url: url + '/' + data.id,
                     dataType: "html",
                     cache: false,
                     success: function (html) {
                         if (html.length > 0) {                                  
                             var $data = $( html ).filter(".item");
                                $container.append($data).imagesLoaded(function(){
                                    $container.masonry('appended', $data );
                                });
                          }
                    }
            });

[BiDbMAK]

Hi, do we have any progress here? Or maybe someone knows how to make lazyload image load on zoom effect? Thanks!