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

Question

所以基本上我正在创建一种画廊，当它弹出时我收到一个错误:

The Image could not be loaded

我不知道我做错了什么，因为我包含了所需的所有 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');
                }
            }
            });
    });
});

JSFiddle:http://jsfiddle.net/roa59n2t/1/

Answer 1

因此，方法之一是将占位符图像包装在目标链接内，如下所示。

/** MY CODE **/
$('a.popup').magnificPopup({type: 'image' });

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<div>
    <div class="gallery-item">
        <a class="popup" style="display: block" href="http://placehold.it/150x150"><img class="popup" src="http://placehold.it/150x150" alt="" /></a>
        <div class="item-overlay">
            <span><i class="fa fa-plus"></i></span>
        </div>
    </div>
    
    <div class="gallery-item">
        <a class="popup" style="display: block" href="http://placehold.it/200x200"><img class="popup" src="http://placehold.it/200x200" alt="" /></a>
        <div class="item-overlay">
            <span><i class="fa fa-plus"></i></span>
        </div>
    </div>
</div>