Question

我正在laravel环境中使用巨大的弹出窗口并希望两者一起工作，所以我写了这个：

$(document).ready(function() {

    $('.image-popup-vertical-fit').on('click',function(){
    var image = $(this).attr('src');

    popnow(image);
});

    function popnow(a) {

    $('.image-popup-vertical-fit').magnificPopup({

        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        },
        items: {
        src: a
            }

    });
}
    });

HTML：

<div class="col-lg-6 col-sm-6 margin-top-60">
    {{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>

<div class="col-lg-6 col-sm-6 margin-top-60" id="test">
    {{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>

如果我在页面重新加载后第一次点击弹出打开的图像没有任何反应，如果我第二次点击它打开。

但是当我在页面重新加载后第一次点击第一个div时，之后我点击第二个，它仍然显示第一个单击div的内容（第一次点击第二个div时 - 错误的图像）。

所以似乎每次点击都不会var image。我的功能有问题吗？

当我将console.log(a)添加到function popnow(a)的顶部时，会记录正确的图像src。

Answer 1

只需迭代每个图像并为每个图像添加魔法。然后，您只需单击每个图像即可打开弹出窗口。

Working fiddle

function popnow(){
  $('.image-popup-vertical-fit').each(function(){
    var image = $(this).attr('src');
    $(this).magnificPopup({

        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        },
        items: {
            src: image
        }
      });
   });
}
 // Init function
  popnow();

PS：我使用过CDN的插件。使用jsfiddle时，尝试从CDN加载插件或库，而不是从工作区加载。

Answer 2

magnificPopup做的是启用弹出窗口。所以首先点击你只需启用它，而不是将其调出。第二次单击第二个图像会弹出第一个图像，因为您启用它时src设置为第一个图像。

$(document).ready(function() {
    $('.image-popup-vertical-fit').each(function(i, el) {
        $(el).magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                  verticalFit: true
                },
                items: {src: $(el).attr('src')}
        });
    });
});

Fiddle

顺便说一下，我把代码放在了magnificPopup插件之后。最好在代码加载之前加载插件。

函数在第二次单击之前打开弹出窗口

2 个答案: