Magnific popup: getting “The image could not be loaded”

Question

I can't make a gallery work with magnific popup. When I click on a picture I receive “The image could not be loaded”.

Here is the html file listing images:

<div class='container'>
    <div class='picture'><img src='images/gallery/a.jpg'/></div>
    <div class='picture'><img src='images/gallery/b.jpg'/></div>
    <div class='picture'><img src='images/gallery/c.jpg'/></div>
    <div class='picture'><img src='images/gallery/d.jpg'/></div>
    <div class='picture'><img src='images/gallery/e.jpg'/></div>
</div>

Here the jquery code:

$.get( 'html/gallery.html', function( data ) {
        $('#page_content').append(data);

        $('.container').magnificPopup({
        type: 'image',
        delegate: 'div',
        gallery:{
            enabled: true,
            navigateByImgClick: true,
            arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
            tPrev: 'Previous (Left arrow key)',
            tNext: 'Next (Right arrow key)',
            tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
        }
    });

I tried to change the "delegate" value to 'div' or 'img' but no result. (I followed this Magnific popup: getting "The image could not be loaded" and image url is undefined)

Thanks for help :)

Answer 1

Well problem solved... Magnific popup needs a href attribute in order to work.

Solution :

<div class='container'>
    <div class='picture' href='images/gallery/a.jpg'><img src='images/gallery/a.jpg'/></div>
    <div class='picture' href='images/gallery/b.jpg'><img src='images/gallery/b.jpg'/></div>
    ....
</div>