Magnific-popup：如何在某些项目上禁用弹出窗口？

Question

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

当您点击galery的某个项目时，它使用'magnific popup'插件显示1280x720图像。

我希望在单击网格视图的项目时避免显示此1280x720图像（我只想打开另一个带有href的页面，但是大胆的弹出插件会覆盖href）。如何避免显示此1280x720图像？

请注意，删除包含magnific popup脚本无效，因为在这种情况下网格视图不再加载。

感谢您的帮助。

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. 屏蔽click标记的a事件。你是怎么做到的？您可以在脚本<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>

Answer 2

要将其与宏弹出窗口解除绑定，可以使用：

orElse(0)