将 magnificPopup 与动态元素一起使用

Question

我有两张照片，都有class"foto"。在每张照片下我添加了一个按钮，允许我删除照片。

但是，从 DOM 中删除照片后，我仍然可以在图库中打开照片，而不是预期的 1 张中的 1 张照片，右下角仍然有 2 张中的 1 张，我可以仍然可以在 magnificPopup 的图库中看到已删除的照片。还在缓存中吗？

$(document).ready
(
    function()
    {
        $('.foto').magnificPopup
        (
            {
                type: 'image',
                closeOnContentClick: false,
                closeBtnInside: false,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                image: 
                {
                    verticalFit: true,
                    titleSrc: function(item) 
                    {
                        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
                    }
                },
                gallery: 
                { 
                    enabled: true 
                },
                zoom: 
                {
                    enabled: true,
                    duration: 300, // don't foget to change the duration also in CSS
                    opener: function(element) 
                    {
                        return element.find('img');
                    }
                }
            }
        );
    }
);

magnificPopup 不兼容动态元素吗？有没有办法在不重新加载整个页面的情况下重新初始化功能？

Answer 1

我找到了解决办法。我将事件侦听器添加到函数中，然后在需要重新初始化时随时调用此函数。

function init_magnificPopup()
{
        $('.foto').magnificPopup
        (
            {
                type: 'image',
                closeOnContentClick: false,
                closeBtnInside: false,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                image: 
                {
                    verticalFit: true,
                    titleSrc: function(item) 
                    {
                        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
                    }
                },
                gallery: 
                { 
                    enabled: true 
                },
                zoom: 
                {
                    enabled: true,
                    duration: 300, // don't foget to change the duration also in CSS
                    opener: function(element) 
                    {
                        return element.find('img');
                    }
                }
            }
        );
}

$(document).ready
(
    function()
    {
        init_magnificPopup();
    }
);

所以我只是在我的删除函数结束时调用 init_magnificPopup()。行得通:)

Answer 2

试试这个 ;)

function initMagnificPopup(){
    $('.foto').magnificPopup({
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {
                return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
           }
        },
        gallery: { 
           enabled: true 
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function(element) {
                return element.find('img');
            }
        }
    });
}

$(function(){
    initMagnificPopup();
    /* add call this function whenever you delete an image. */
});

Answer 3

用动态元素试试这个：

$(document).on('click', '.foto', function () { $(this).magnificPopup({....}); });

将 magnificPopup 与动态元素一起使用

Use magnificPopup with dynamic elements

javascript

jquery

magnific-popup