对动态元素使用magnificPopup [英] Use magnificPopup with dynamic elements

问题描述

我有两张照片，都有"foto"类.在每张照片下方，我添加了一个按钮，可以删除照片.

I have two photos, both have the class "foto". Under each photo i added a button which allows me to delete the photo.

但是，从DOM中删除照片后，我仍然可以在图库中打开照片，而不是像预期的那样1张照片中的1张，我仍然在右下角拥有2张照片中的1张，并且我仍然可以看到其中的已删除照片magnificPopup的画廊.还在缓存中吗?

However, i can still open the photo in the galery after removing a photo from the DOM, instead of 1 of 1 photos like expected, i still have 1 of 2 at the bottom right and i can still see the deleted photo within magnificPopup's galery. Is it still in the cache?

$(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是否与动态元素不兼容?有没有一种方法可以在不重新加载整个页面的情况下重新初始化函数?

Is magnificPopup not compatible with dynamic elements? Is there a way to reinitialize the function without reloading the whole page?

推荐答案

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

I found a solution. I added the event listeners into a function, then i just call this function anytime when i need to reinitialise it.

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().可行:)

So i just call init_magnificPopup() at the end of my delete function. That works :)

这篇关于对动态元素使用magnificPopup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！