Wrap dynamic content with jQuery

Within Sitefinity CMS, I am using a gallery script that seems to be compiled in the backend files. In other words, I can't access nor change the sourcecode.

The gallery works as it should, but I would like to add a lightbox to it. So I started using 'wrapAll' combined with on load. This works on the very first image, but as soon as the next image is loaded dynamically (in other words, the image and surrounding tags are being replaced), it stops working.

I am stuck. Anyone any idea?

My code:

$(window).on("load", function () {
var i = 0;
$(".galleria-images .galleria-image img").each(function () {
    i++;
    //alert(i);
    var lightboximg = $(this).attr("src");
    $(this).wrap("<a href=" + lightboximg + " class='fancybox'></a>");

});
$(".fancybox").fancybox();
})

I also tried to just add fancybox() to the structure, but that works once as well.

The generated HTML (as it should):

<div style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;" class="galleria-images">
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;" class="galleria-layer"></div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 4; background: rgb(0, 0, 0) none repeat scroll 0% 0%; display: none;" class="galleria-frame">
</div>
</div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 563px; height: 340px; transition: none 0s ease 0s ; z-index: 1;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none; width: 563px; height: 352px;" class="galleria-layer">
</div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 4; background: rgb(0, 0, 0) none repeat scroll 0% 0%; display: none;" class="galleria-frame">
</div>
<a href="/images/default-source/scholen/adm/administratief-en-juridisch-44.jpg?sfvrsn=2" class="fancybox">
<img src="/images/default-source/scholen/adm/administratief-en-juridisch-44.jpg?sfvrsn=2" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; transform: translate3d(0px, 0px, 0px); width: 544px; height: 340px; position: absolute; top: -6px; left: 0px;" height="340" width="544"></a>
</div>
</div>

The next image looks the same, except the image isn't wrapped.

update

Eventually solved it by killing Galleria and starting it over again using my own options. The excerpt is:

Galleria.configure({

extend: function (options) {

    Galleria.log(this) // the gallery instance
    Galleria.log(options) // the gallery options

    // listen to when an image is shown
    this.bind('image', function (e) {

        Galleria.log(e) // the event object may contain custom objects, in this case the main image
        Galleria.log(e.imageTarget) // the current image

        lightboximg = jQuery(e.imageTarget).attr("src");
        jQuery(e.imageTarget).addClass('test');
        jQuery(e.imageTarget).wrap("<a href=" + lightboximg + " class='fancybox'></a>");
        $(".fancybox").fancybox();

    });
}

});

The problem is that "load" event triggers only once. That's why you can see only one image wrapped.

Here is a easy way to do it:

HTML

<div id="container">
    Hello World
</div>

JS

(function() {
    setInterval(function(){
        $("#container").append('<div class="item new">New Item</div>');
    }, 3000);

    setInterval(function() {
        $('.item').css('color', 'red');
        $('.item').removeClass('new');
    }, 100);
})();

Fiddle

Downside of this approach is unnecessary load on page, so if you need performance, take a look at:Determining if a HTML element has been added to the DOM dynamically

The third option, and the best on my opinion is to trigger custom event when image added, but for this you will need to change code, which actually responsible for adding images to the page:

$(document).trigger('imageAdded');

$(document).on('imageAdded', function() {....})