fancybox双击打开画廊 [英] fancybox open gallery with doubleclick

问题描述

是否可以通过双击而不是单击的方式来打开图库?

Is there a way to open a gallery with double-clik instead of single click ?

$(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>
....

这显然不能按预期工作，但是有什么可以工作的吗?

This obviously doesn't work as expected, but is there something that will work ?

推荐答案

首先，您需要手动构建画廊，然后才能在双击事件后触发画廊.

First you need to manually build your gallery before you can fire it after a double-click event.

要即时创建画廊，您需要使用 .each()还要绑定每个元素的 index ，以便画廊从双开单击的元素，而不是第一个.

To build your gallery on-the-fly, you need to use .each() to also bind the index of each element so the gallery opens from the double-clicked element instead of the first.

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

Also, you can bind several events using jQuery .on() so try this :

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

See JSFIDDLE

这篇关于fancybox双击打开画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！