使用 API 打开 Magnific 弹出窗口显示无图像

Question

当我尝试使用 API 打开 Magnific 弹出窗口时，除了叠加层之外没有显示任何内容。在此代码中，我想在图库的 href 中显示两张图片。

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

实现结果的一种方法是将 items 构建为对象数组：

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>

使用 API 打开 Magnific 弹出窗口显示无图像

Opening Magnific popup using API shows no images

javascript

jquery

magnific-popup