如何在双击而不是单击以获取放大的弹出窗口时加载

Question

我认为这将是一个非常简单的问题：如何覆盖 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，其中包含在页面加载后附加到它的图像。我想要做的就是将单击事件释放为其他内容，而是在双击时打开 Magnific Popup。

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

Github 上的精彩弹出窗口： https://github.com/dimsemenov/Magnific-Popup

Answer 1

解决办法是去掉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,output