Question

我正在使用fancybox。这里fancybox将在点击某处显示，但我需要在页面滚动后显示。现在我正在寻找fancybox。任何人都可以建议我任何插件像fancybox滚动而不是点击。

现在我尝试过fancybox，所以这里是fancybox的代码。但你可以帮助我任何插件。

$(document).ready(function() {
		$(".fancybox").fancybox();
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>


<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
	<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>

Answer 1

Mousewheel事件监听器取自：Get mouse wheel events in jQuery?

我还创建了一个jsFiddle：https://jsfiddle.net/jmL7zgzt/

＆＃13;

$(document).ready(function() {
		$(".fancybox").fancybox();
});
$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
       // scroll up
           if (!$("html").hasClass("fancybox-enabled")) $('.fancybox').click()
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>


<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
	<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>

＆＃13;

Answer 2

保留fancybox插件的一个简单方法是在滚动时触发图像上的点击。

$(window).one('scroll', function(){
     $('img').trigger("click")
})

需要在页面滚动上打开fancybox内容而不是单击某处

2 个答案: