Оберните динамический контент с помощью jQuery

Question

В Sitefinity CMS, я использую сценарий галереи, который, как представляется, компилируется в бэкэнд-файлах. Другими словами, я не могу получить доступ и изменить исходный код.

Галерея работает так, как должно, но я хотел бы добавить к ней лайтбокс. Поэтому я начал использовать «wrapAll» в сочетании с загрузкой. Это работает на самом первом изображении, но как только следующее изображение загружается динамически (другими словами, изображение и окружающие теги заменяются), он перестает работать.

Я застрял. Любая идея?

Мой код:

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

Я также попытался просто добавить FancyBox() в структуре, но это работает один раз, а также.

Сгенерированный HTML (как это должно быть):

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

следующее изображение выглядит так же, за исключением того, изображение не обернуты.

обновление

В конце концов решил ее убить и Galleria запустить его снова, используя свои собственные варианты. Выписка:

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

    }); 
} 

});

Answer 1

Проблема заключается в том, что событие «load» запускается только один раз. Вот почему вы можете увидеть только одно обернутое изображение.

Вот простой способ сделать это:

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

Даунсайд этого подхода является ненужной нагрузки на странице, поэтому если вам нужна производительность, взгляните на: Determining if a HTML element has been added to the DOM dynamically

Третий вариант, и лучший на мой взгляд, чтобы вызвать пользовательское событие при добавлении изображения, но для этого вам нужно будет изменить код, который на самом деле отвечает за добавление изображений на странице:

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

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