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上的Magnific Popup： 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

如何加载双击而不是单击以进行夸张弹出

1 个答案: