jquery - 如何用 dblclick 事件打开一个花哨的盒子

Question

我的问题在标题中：如何使用 dblclick 事件打开 jquery fancybox（http://www.fancybox.net/）？

提前感谢您的回复:)

编辑：我试过了，但它似乎不起作用，我真的不知道为什么：

$("#id").dblclick(function(){

    $("#id").fancybox({
        ...
    });
    $("#id").click(); //Trigger click to open the fancy because dblclick doesn't open the fancy
    $("#id").unbind('click.fb'); //unbind the click fancybox event

});

想法是在触发 dblclick 时处理花式框，然后触发单击以打开花式，然后取消绑定 click.fb 事件以防止在用户触发单击时打开花式框。不幸的是， unbind('click.fb') 似乎不起作用。

Answer 1

我不确定我是否完全明白这个问题，但试试这个：

$('button').dblclick( function() {
    $.fancybox({
        href: '#fancybox'
        // other options here
    });
});

无需解绑任何东西。

编辑：这是一个 jsfiddle 示例。

http://jsfiddle.net/abqTD/3/

Answer 2

 $(".fbox").dblclick( function () {  $.fancybox({
   'transitionIn'  : 'elastic',
   'transitionOut' : 'elastic',
   'speedIn'   : 600,
   'speedOut'    : 200,
   'href': $(this).attr('href')
   // 'overlayShow' : false
   });
 });

...<img src="path/someimage_thumb.jpg" href="path/someimage.jpg" class="fbox">

我正在尝试做类似的事情，但在课堂上。试图将它与jquery image picker集成。

Answer 3

试试 jQuery .trigger() 方法。这样，您应该有另一个元素，例如用于激活 fancybox 的按钮。

$("button").dblclick( function() {
    $("#fancybox").trigger('click');  

});

$("#fancybox").click( $(this).fancybox(){
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'speedIn'       :  600, 
        'speedOut'      :  200, 
        'overlayShow'   :  false
    });

Answer 4

使用 fancybox 方法来做到这一点。

HTML

img src="images/sample_image.png" alt="Sample Title" class="fancybox"

jQuery

$(document).ready(function() {
    $('.fancybox').dblclick(function() {
        var imgSrc = $(this).attr('src'),
            imgTitle = $(this).attr('alt');

        $.fancybox.open({href : imgSrc , title : imgTitle });
    });
});

希望这有帮助... ;)