在我超过2小时尝试排除故障后，我在这里 - 一个新手！
问题：我正在尝试创建一个MAGNIFIC LIGHTBOX GALLERY（就像示例：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上传 .
有线索吗？
谢谢！