APIを使ってMagnificentポップアップを開くと画像が表示されない

Question

APIを使ってMagnificentポップアップを開こうとすると、オーバーレイ以外は何も表示されません。このコードでは、ギャラリーのhrefに2つの画像を表示したいと思います。

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

Answer 1

あなたの結果を達成するための方法は、オブジェクトの配列としてアイテムを建てにある：

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>