使用Magnific Popup

Question

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

  

无法加载图片

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;