Question

我有一个场景，我的代码显示图像缩略图动态加载到DOM。单击缩略图后，我想使用maginfic popup加载完整图像。以下是我的观点：

<div class="Right-Panel-Section popup-gallery">
        <h2>Images</h2>
        @foreach (var media in @Model.lsContentMedia)
        {
            <div class=" Float-Left" data-id="@media.MediaId">
                <a href="@media.ContentMediaFileName" >
                    <img src="@media.ContentMediaFileName" style="width:80px;height:80px;margin:5px;" title="@media.Description" class="gallery-item"/>
                </a>

            </div>
        }
    </div>

由于我无法直接访问DOM元素，因此我使用委托来连接Magnific，如下所示：

$("#Fixed-Container").on("click", ".popup-gallery", function (event) {
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                }
            });
            event.preventDefault();
        });

我已正确包含样式和脚本文件。但是，我最初只能在任何图片上点击两次后查看图片。我希望它始终只需单击即可完成。对此有任何帮助将非常感激。

Answer 1

尝试将.magnificPopup('open')链接到弹出初始化。

您的代码应为：

$("#Fixed-Container").on("click", ".popup-gallery", function (event) {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        }
    }).magnificPopup('open');
    event.preventDefault();
});

Answer 2

我不知道你是否还有这个问题，但我今天遇到了同样的问题。这就是我所做的。

    $('body').on('click', "a.videolink", function(e){
      $.magnificPopup.open({
        items: {
          src: $(this).attr('href')
        },
        type: 'iframe',
      });
      e.preventDefault();       
    });

magnific popup需要单击两次才能打开图像滑块

2 个答案: