Wrap dynamic content with jQuery

Question

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();

    });
}

});

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

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() {....})

edited May 23 '17 at 12:21

Community

1
1

answered Jul 06 '15 at 10:38

Sargon

262
1
9

Thank you for your reply. To be honoust, I really don't know what you were doing in the first script. I tried it by adding a class (this worked) but appending or wrapping just didn't. I eventually solved it by killing the galleria plugin and intializing it again. If you have time to perhaps explain why addclass works , but appending doesn't, I'd really like to know. Thanks for your answer! – mat Jul 06 '15 at 12:41
1

In the script I have two functions, first just adding elements to the page to imitate your use case, the second one searches for new elements and change the style, then remove the "new" class so it will be skipped next time. Strange but, wrap works for me as good as color change. So just take a look at updated fiddle: https://jsfiddle.net/s4jo3gxu/2/ Hope it will answer your question. If not, please let me know, I'm also curious about it. – Sargon Jul 06 '15 at 13:08
I really don't know why mine doesn't work. The code seems legit and your example is working fine. When the site comes in production (online) i'll let you know so you can perhaps have a look at it. One more question though. How come your code works, is that because of the 100ms time? Is there any other solution like something with on(change) or anything like that? – mat Jul 07 '15 at 12:49
1

My solution is pretty dumb =) I just check the page for new elements each 100 ms and change them. Unfortunately the only good solution for your use case is third option that I have mentioned in the first post. For more details just take a look at the link in my reply, there is same question answered there. – Sargon Jul 07 '15 at 12:55
1

Thank you, I appreciate all your help and time! Eventually I am going to learn this myself :) – mat Jul 08 '15 at 07:20

Wrap dynamic content with jQuery

1 Answers1