简体   繁体   English

Fancybox:在鼠标悬停/鼠标悬停时使用它

[英]Fancybox: Getting it to work on mouseover/mouseout

I currently have it working halfway by using: 我目前通过以下方式使它工作一半:

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

When I hover over the thumbnail it works fine, but when I mouseover the background, #fancybox-overlay it doesnt disable fancybox.. any ideas? 当我将鼠标悬停在缩略图上时,效果很好,但是当我将鼠标悬停在背景上时, #fancybox-overlay不会禁用fancybox ..有什么想法吗?

with hoverIntent: 与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

The Answer: 答案:

HTML 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 JS

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

DEMO 演示

use this snippet: 使用以下代码段:

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

do the same with mouseout event ... =) 用mouseout事件做同样的事情... =)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM