gpt4 book ai didi

javascript - 将 magnificPopup 与动态元素一起使用

转载 作者:行者123 更新时间:2023-11-30 15:52:14 24 4
gpt4 key购买 nike

我有两张照片,都有“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 不兼容动态元素吗?有没有办法在不重新加载整个页面的情况下重新初始化函数?

最佳答案

试试这个 ;)

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. */
});

关于javascript - 将 magnificPopup 与动态元素一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39144031/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com