Magnific popup: getting "The image could not be loaded" and image url is undefined

Question

I cannot make magnific popup work for some reason getting "The image could not be loaded" all the time. The image url is "undefined".

<div class="album">
    <a href="http://lorempixel.com/1024/768/?a=1">
        <img src="http://lorempixel.com/168/168/?a=1" />
    </a>
    <a href="http://lorempixel.com/1024/768/?a=2">
        <img src="http://lorempixel.com/168/168/?a=2" />
    </a>
    <a href="http://lorempixel.com/1024/768/?a=3">
        <img src="http://lorempixel.com/168/168/?a=3" />
    </a>
</div>

<script>
    $(function() {
        $('div.album').magnificPopup({ type: 'image' });
    });
</script>

http://jsfiddle.net/8vTYf/2/

Answer 1

Changed the code to:

$(function() {
    $('div.album').magnificPopup({delegate: 'a', type: 'image' });
});

As from http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup

The problem was you referred to the container instead of the 'a' element which contains the link to the image.