jekyll - 图像的宏伟弹出式画廊不起作用

Question

在尝试自己解决这个问题超过 2 小时后，我在这里 - 一个新手！

问题：我正在尝试创建一个 MAGNIFIC LIGHTBOX GALLERY（就像示例：http ://dimsemenov.com/plugins/magnific-popup/ ）但是当您单击图像时，它会打开一个新页面（所以画廊不起作用 - 看看这里发生了什么）。

这是我的 HTML：

<div class="grid gallery popup-gallery" id="portfolio-grid">
  <div class="col-4_sm-6_xs-12">
    <a href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" ><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="casa"></a>
  </div>
  <div class="col-4_sm-6_xs-12">
    <a  href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" ><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="casa"></a>
  </div>
  <div class="col-4_sm-6_xs-12">
    <a  href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" ><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="casa"></a>
  </div>
  <div class="col-4_sm-6_xs-12">
    <a href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" ><img src="" alt="casa"></a>
  </div>
</div>

还有我的 Javascript：

$(document).ready(function() {
$('.popup-gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});
});

旁注/要求：我正在使用 Gridlex Flexbox 将图像包装在网格中，它是一个动态网站，因此图像通过 Jekyll 上传。

有什么线索吗？

谢谢！

标签： jekyllgalleryimage-gallerymagnific-popup