放大弹出窗口:如何禁用在某些项目上打开弹出窗口

Magnific-popup: how to disable the opening of a popup on some items?

本文关键字：窗口 项目 何禁用 放大      更新时间：2023-09-26

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

它使用"放大弹出"插件来显示1280x720的图像，当你点击一个项目的galery。

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

请注意，删除包含放大弹出脚本是不起作用的，因为在这种情况下，网格视图不再加载。

谢谢你的帮助。

删除包含amplific弹出脚本的解决方案不起作用的原因是，尽管脚本不存在，但插件的初始化仍然存在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>

要从放大镜弹出窗口解除绑定，可以使用：

$('#mylink').off('click');
相关文章：