Fancybox:让它在mouseover / mouseout上工作

时间:2012-08-19 00:56:58

标签: javascript jquery fancybox

我目前使用以下方法让它工作:

jQuery("a.lightbox").fancybox().hover(function() {
    jQuery(this).click();
  }, function() {
    jQuery("#fancybox-overlay").click();
  });

当我将鼠标悬停在缩略图上时,它可以正常工作,但当我将鼠标悬停在背景上时,#fancybox-overlay它不会禁用fancybox ..任何想法?

使用hoverIntent:

function openFancybox(){
 jQuery(this).trigger("click");
}
function closeFancybox(){
 jQuery.fancybox.close();
}

jQuery("a.lightbox").hoverIntent({
 sensitivity: 100,
 interval:250,
 timeout:0,
 over: openFancybox,
 out: closeFancybox 
}); // hoverIntent

jQuery("#fancybox-content img").hoverIntent({
 sensitivity: 10,
 interval:500,
 timeout:0,
// over: openFancybox,
 out: closeFancybox 
}); // hoverIntent

jQuery("a.lightbox").fancybox({
 'overlayShow' : false,
 'autoScale'   : true
}); // fancybox

2 个答案:

答案 0 :(得分:1)

答案:

<强> HTML

<a href="image1.jpg" class="lightbox" rel="gallery"><img src="image1.jpg"></a>
<a href="image2.jpg" class="lightbox" rel="gallery"><img src="image2.jpg"></a>​

<强> JS

$("a.lightbox").fancybox({
    'showCloseButton': false
}).hover(function() {
    $(this).click();
    $(".fancybox-overlay").mouseout(function() {
        $.fancybox.close();
    });
});​

<强> DEMO

答案 1 :(得分:0)

使用此代码段:

$("a.lightbox").mouseover(function(){
   $("a.lightbox:first").trigger("click");
});

对mouseout事件执行相同操作... =)