Jekyll 用于图像不工作的放大弹出式图库

经过两个多小时的尝试，我自己解决了这个问题，现在我是一个新手

问题：我试图创建一个放大的灯箱图库（就像示例：），但当你点击一个图像时，它会打开一个新页面（所以图库不工作-看看生活中发生了什么）

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

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

有什么线索吗

---

谢谢大家!

欢迎光临。在您页面的控制台中，我看到一些错误，如

$不是函数。当我查看页面的源代码时，jquery.js似乎是在jquery.magnific-popup.js之后被调用的。我猜这可能是问题所在？天哪，这么简单的解决方法。我做到了，而且成功了。非常感谢你！
$(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
        }
    });
});
});