Images fail to load using Magnific Popup

Question

So basically I'm creating a sort of gallery and I'm getting an error when it pops up saying:

The Image could not be loaded

I don't know what I'm doing wrong as I included all the css and javascript files needed. Here is my 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>

Here is my 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

So, one of the ways is to wrap your placeholder image within the target link, like below.

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