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

问题是＆＃34;加载＆＃34;事件只触发一次。这就是为什么你只能看到一个图像被包裹的原因。

这是一种简单的方法：

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

1 个答案: