Javascript 无法使用放大弹出窗口加载图像

所以基本上我在创建一种画廊，当它突然出现时，我得到一个错误，它说：

无法加载图像

我不知道我做错了什么，因为我包含了所有需要的css和javascript文件。这是我的HTML：

<div class="gallery-item">
        <img class="popup" src="http://placehold.it/200x200" alt="">
        <a class="popup" href="http://placehold.it/200x200"><div class="item-overlay">
            <span><i class="fa fa-plus"></i></span>
        </div></a>
</div>

以下是我的JavaScript：

$(document).ready(function() {
    $('.popup').each(function() {
        $(this).magnificPopup({
            type: 'image',
            delegate: 'div',
            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');
                }
            }
            });
    });
});

$（文档）.ready（函数（）{
$（'.popup'）。每个（函数（）{
$（此）.magnificPopup({
键入：“图像”，
代表：“div”，
closeOnContentClick:false，
closebtnside:false，
mainClass:“带缩放功能的mfp mfp img mobile”，
图片：{
垂直拟合：正确，
标题RC：功能（项目）{
返回项.el.attr（'title'）+'·；'；
}
},
画廊：{
已启用：true
},
缩放：{
启用：对，
持续时间：300，//不要忘记更改CSS中的持续时间
开启器：函数（元素）{
返回元素。find（'img'）；
}
}
});
});
});

---

jshiddle:

因此，其中一种方法是将占位符图像包装到目标链接中，如下所示

/**我的代码**/
$（'a.popup'）.magnificpoop（{type:'image'}）

你能用你的代码创建一个演示吗？例如，你是否尝试过
$（'a.popup'）。每个（函数（）{
？a.popup没有区别@LShettyJSFiddle:JSFiddle:@haykmantashyan看起来你不能在
a
->