Question

有没有办法通过双击而不是单击来打开图库？

$(document).ready(function() {
    $('.fancybox').click(function (e) {
        e.preventDefault();
    }); 

    $('.fancybox').dblclick( function(){          
        $(".fancybox").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            loop: false,
            padding : 0,
        });
    });
});

<a title="" href="http://url.com/my-image-big.jpg" rel="gallery1" class="fancybox">
  <img src="my-image-small.jpg">
</a>
<a title="" href="http://url.com/my-image-big.jpg" rel="gallery1" class="fancybox">
  <img src="my-image-small.jpg">
</a>
....

这显然不能按预期工作，但有什么可行吗？

Answer 1

首先，您需要先手动构建图库，然后才能在double-click事件后触发它。

要动态构建您的图库，您需要使用.each()来绑定每个元素的index，以便图库从双击元素而不是第一个元素打开。 / p>

此外，您可以使用jQuery .on()绑定多个事件，请尝试以下操作：

var gallery = []; // array of gallery elements
jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        gallery.push(this.href); // push element to the array

        // bind your click and double-click events
        $(this).on({
            click: function (event) {
                event.preventDefault();
            },
            dblclick: function (event) {
                $.fancybox(gallery, {
                    // API options
                    padding: 0,
                    index: i // starts gallery from (double) clicked element
                });
            }
        });
    });
}); // ready

参见 JSFIDDLE

Answer 2

以下代码段显示您的代码正常运行。我想还有另一个click（）触发器绑定到其他地方的.fancybox，在你的之后调用，取代click事件的preventDefault（）。

$('.fancybox').click(function(e){
  e.preventDefault();
});

$('.fancybox').dblclick(function(){
  $('#displayme').show();
});

#displayme{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="fancybox" href="#" >Fancybox link</a>
<p id="displayme">Hellow I'm a FancyBox</p>

Answer 3

也许这段代码可以帮到你： http://jsfiddle.net/st34o7gw/

$('.open_fancybox').on('click',function (e) {              
    e.preventDefault();
});
$(".open_fancybox").dblclick(function() {

$.fancybox.open([
    {
        href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',                
        title : '1st title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',                
        title : '2nd title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',                
        title : '3rd title'
    }
], {
    padding : 0
});

return false;

});

fancybox打开画廊与doubleclick

3 个答案: