Opening Magnific popup using API shows no images

When I try to open a Magnific popup using the API, nothing is displayed other than the overlay. In this code I want to display the two images in the href in the gallery.

$(document).ready(function() {
  $.magnificPopup.open({
    items: {
      src: '#gallery'
    },
    type: 'inline'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<div id='gallery' class="popup-gallery">
  <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Planets_and_sun_size_comparison.jpg/640px-Planets_and_sun_size_comparison.jpg" title="Image 1"></a>
  <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Telluric_planets_size_comparison.jpg/640px-Telluric_planets_size_comparison.jpg" title="Image 2"></a>
</div>

Solution

A way to achieve your result is to built the items as an array of objects:

var itemsVal = $('#gallery a').map(function(idx, ele) {
    return {src: $(ele).attr('href'), type: 'image'};
}).get();
$.magnificPopup.open({
    items: itemsVal,
    gallery:{
        enabled:true
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>


<div id='gallery' class="popup-gallery">
    <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Planets_and_sun_size_comparison.jpg/640px-Planets_and_sun_size_comparison.jpg" title="Image 1"></a>
    <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Telluric_planets_size_comparison.jpg/640px-Telluric_planets_size_comparison.jpg" title="Image 2"></a>
</div>