ajax 加载内容上的 Featherlight

Question

我在 ajax 加载的内容上遇到 Featherlight 灯箱问题。

在上传页面上，我显示了一个画廊，其中包含使用灯箱打开的图片。它在第一次加载时运行良好。但是一旦我上传新图片，图库就会被 ajax 刷新，并且灯箱不再工作。

我通过 Jquery 加载 Featherlight :

jQuery(window).on('load', function(){
    var lightbox_url = 'js/jquery.magnific-popup.min.js';
    jQuery.getScript( lightbox_url, function() {
        $('.lightbox-img').magnificPopup({type:'image'});
    });
});

我在文档中没有看到任何选项 (https://github.com/noelboss/featherlight/)。感谢您的帮助！

Answer 1

每当您调用 ajax 调用更改图像时，您必须重新调用 featherlight 启动函数。

$.ajax({url: "xx", success: function(result){
       //your code here 

        $('.lightbox-img').magnificPopup({type:'image'});

}});

ajax 加载内容上的 Featherlight

Featherlight on ajax loaded content

featherlight.js