Magnifica-popup：如何禁用某些项目的弹出窗口打开？

Question

我使用这个模板：http://bootstrapbay.com/preview/ztheme-mulipurpose-responsive-template-B8068D9

它使用'magnific popup'插件来显示一个1280x720图像，当你点击一个项目的甘莱里。

我想避免显示这个1280x720图像时点击一个网格视图的项目（我只是想用href打开另一个页面，但大的弹出式插件覆盖href）。我该如何避免显示此1280x720图像？

请注意，由于在此情况下不再加载网格视图，因此无法删除包含大型弹出式脚本。

感谢您的帮助。

Answer 1

的原因，取消了庄重的弹出脚本不工作列入的解决方案是，虽然剧本不存在，该插件的初始化仍然存在http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/js/page/page.home.js：

$('#owl-our-work').magnificPopup({ 
    delegate: 'a', // child items selector, by clicking on it popup will open 
    type: 'image' 
     // other options 
}); 

这掷导致下一次的脚本不工作的错误：

$("#owl-our-work").owlCarousel({ 
    paginationSpeed: 500, 
    autoPlay: 4000, 
    items: 2, 
    itemsCustom: [ 
     [0, 2], 
     [450, 2] 
    ] 

}); 

所以，你有两个选择：

1. 删除代码片段1中的代码。
2. 阻止a代码的click事件。你如何做到这一点？您可以后添加脚本脚本<script src="assets/js/page/page.home.js"></script>这样的：

// DON'T COPY THIS! This is the old script in "page.home.js" 
 
//MAGINFIC POPUP 
 
$('#owl-our-work').magnificPopup({ 
 
    delegate: 'a', // child items selector, by clicking on it popup will open 
 
    type: 'image' 
 
     // other options 
 
}); 
 

 
/* YOU SHOULD COPY THIS CODE */ 
 
$('#owl-our-work').off('click');

a { 
 
    text-decoration:none; 
 
} 
 

 
img { 
 
    width:100px; 
 
} 
 

 
.item { 
 
    float:left; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet" /> 
 

 
<div id="owl-our-work" class="owl-carousel"> 
 
    <div class="item"> 
 
    <a href="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/lightbox.gif" class="img-wrapper rounded"> 
 
     <img class="img-responsive img-rounded" src="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/1.png" alt="theme-img"> 
 
    </a> 
 
    </div> 
 
    <div class="item"> 
 
    <a href="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/lightbox.gif" class="img-wrapper rounded"> 
 
     <img class="img-responsive img-rounded" src="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/2.png" alt="theme-img"> 
 
    </a> 
 
    </div> 
 
    <div class="item"> 
 
    <a href="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/lightbox.gif" class="img-wrapper rounded"> 
 
     <img class="img-responsive img-rounded" src="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/3.png" alt="theme-img"> 
 
    </a> 
 
    </div> 
 
    <div class="item"> 
 
    <a href="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/lightbox.gif" class="img-wrapper rounded"> 
 
     <img class="img-responsive img-rounded" src="http://mamoot-themes.com/theme-preview/z-theme-1-2/assets/images/portfolio/4.png" alt="theme-img"> 
 
    </a> 
 
    </div> 
 
</div>