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事件以防止在用户触发单击时打开fancybox。不幸的是，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 });
    });
});

希望这有助于......;）

如何用dblclick事件打开一个奇特的盒子

4 个答案: