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

用 jQuery 包装动态内容

Wrap dynamic content with jQuery

javascript

jquery

dynamic

galleria

fancybox