宏伟的弹出式图片库无法正常工作

Question

经过2小时以上的尝试自行解决问题之后，我来了-新手！

问题：我正在尝试创建一个宏伟的LIGHTBOX画廊（就像示例：http://dimsemenov.com/plugins/magnific-popup/），但是当您单击图像时，它会打开一个新页面（因此画廊不起作用-请参阅生活中发生了什么here）。

这是我的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上传。

有任何线索吗？

谢谢！