如何加载双击而不是点击放大弹出

How load on double-click instead of click for magnific popup

本文关键字：放大 何加载 加载 双击      更新时间：2023-09-26

我认为这将是一个非常简单的问题：如何覆盖Magnific Popup的默认加载方法：我不想在点击时加载图像，而是想在双击时加载。

我正在使用该模块在网站上加载图像。这是页面的js代码：

 $(document).ready(function() {
    // override magnificPopup.resizeImage:
    $.magnificPopup.instance.resizeImage = betterResizeImage;
    var magnific = $('#photoList').magnificPopup({
        delegate: 'img', // child items selector, by clicking on it popup will open
        type: 'image',
        closeOnContentClick: true,
    });
    $.getJSON('/json', function(json) {
        console.log('got json');
        json.forEach(function(item) {
            var img=$('<img/>')
                .attr('src', '/img/' + item.thumbnail)
                .attr('class', 'thumnail')
                .attr('data-mfp-src', '/img/' + item.file_name)
                .on('load', function() {
                    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                        console.log('error loading ' + item.thumbnail);
                    } else {
                        $('#photoList').append(img);
                    }            
                });
        });
    });
});

$('#photoList')只是一个div，它保存页面加载后附加到它的图像。我所要做的就是将单击事件释放为其他事件，并在双击时打开放大弹出菜单。

我不知道在模块的代码中，onclick事件注册在哪里来打开模块，以及我将如何覆盖它。Mosh Feu的答案很接近，但每次双击任何图像时，都会打开div中的第一个图像。

Github上的华丽弹出菜单：https://github.com/dimsemenov/Magnific-Popup

解决方案是删除click处理程序并添加双击（dblclick）事件。

// init magnific
var magnific = $('.magnific').magnificPopup({
  type: 'iframe'
});
// remove click handler of magnific
magnific.off('click');
// prevent the default click event of the link so it will no redirect to the `href`
magnific.on('click', function(e) {
  e.preventDefault();
});
// add double click handler and call the `open` function of magnific
magnific.on('dblclick', function(){
  magnific.magnificPopup('open')
});
<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" />
<a class="magnific" href="https://www.youtube.com/watch?v=ij_0p_6qTss" class="magnific">magnific</a>

更新

如果你想展示一个画廊，那就是方法：

// init magnific
var magnific = $('.container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery:{
    enabled:true
  }
});
var links = magnific.find('a');
// remove click handler of magnific
magnific.off('click');
// prevent the default click event of the link so it will no redirect to the `href`
links.on('click', function(e) {
  e.preventDefault();
});
// add double click handler and call the `open` function of magnific with a specific index
links.on('dblclick', function() {
  magnific.magnificPopup('open', links.index(this))
});
a {
  text-decoration:none;
}
img {
  width:100px;
}
<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 class="container">
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sun0824.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sun0824_small.jpg" />
  </a>
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sunobject.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sunobject_small.jpg" />
  </a>
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sun0824a.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sun0824a_small.jpg" />
  </a>
</div>

http://jsbin.com/cusixax/edit?html，css，js，输出

相关文章：