Magnific-Popup Gallery 不会打开两次

Posted

技术标签:

【中文标题】Magnific-Popup Gallery 不会打开两次【英文标题】:Magnific-Popup Gallery don't open twice 【发布时间】:2019-06-01 00:29:33 【问题描述】:

我想从缩略图列表中打开一个宏伟的弹出式画廊。

画廊打开一次,一切正常,但如果我关闭画廊,我无法打开两次,我有这个错误:

未捕获的类型错误:无法读取未定义的属性“顶部”

magnific-popup.js 中这一行的错误报告: offset.top -= ( $(window).scrollTop() - paddingTop );

<div id="filelist">
    <div id="156" class="entreprise_img" style="background: url('5c30ff09d7566.jpg') no-repeat center;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;">
        <a href="#" class="entreprise_photo_btn_delete" title="Supprimer">Supprimer</a>
        <a href="5c30ff09d7566.jpg" class="magnific-gallery" style="position: absolute; bottom: 0;">VOIR</a>
    </div>
    <div id="157" class="entreprise_img" style="background: url('5c3104cab1fb7.jpg') no-repeat center;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;">
        <a href="#" class="entreprise_photo_btn_delete" title="Supprimer">Supprimer</a>
        <a href="5c3104cab1fb7.jpg" class="magnific-gallery" style="position: absolute; bottom: 0;">VOIR</a>
    </div>
</div>


$('#filelist').each(function()
    $(this).magnificPopup(
        delegate: '.magnific-gallery',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: 
            verticalFit: true
        ,
        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');
            
           
    );
);

【问题讨论】:

删除缩放选项后一切正常。 【参考方案1】:

我也有类似的错误。解决方法很简单:你需要重写 zoom 属性中的 opener 方法,让它检查被打开的对象是否是图像。

zoom: 
        enabled: true,
        duration: 300,
        opener: function (element) 
                return element.is('img') ? element : element.find('img');
        
      

【讨论】:

保护程序只使用:opener: function(element) return element; 。见github.com/dimsemenov/Magnific-Popup/issues/…

以上是关于Magnific-Popup Gallery 不会打开两次的主要内容,如果未能解决你的问题,请参考以下文章

如何让 magnific-popup 打开内联库中的选定项目?

magnific-popup 是不是有可拖动的选项

html 使用Magnific-Popup JS的两个选项(Django模板)

我可以使用 magnific-popup 显示 MP4 视频吗?

打开带有图像的新弹出窗口,点击弹出窗口内的链接

Android Photo Gallery不会从OnActivityResult中的数据返回正确的Uri