どこかをクリックする代わりに、ページのスクロールでfancyboxコンテンツを開く必要があります。

Question

私はfancyboxを使用しています。ここでfancyboxはどこかをクリックすると表示されますが、私はページのスクロール後に表示する必要があります。今、私はfancyboxを探しています。誰でも、クリックしないでスクロールしてfancyboxのようなプラグインを私に提案することができます。

ここではfancyboxを試しました。ここではfancyboxのコードです。しかし、あなたはプラグインで私を助けることができます。あなたfancyboxプラグインで滞在する

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

<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.)"> 
 
\t <img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" /> 
 
</a>

Answer 1

このから取られたマウスホイールイベントリスナー：Get mouse wheel events in jQuery?

私もjsFiddleを作成しました：最後にスクロールしたときhttps://jsfiddle.net/jmL7zgzt/

$(document).ready(function() { 
 
\t \t $(".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() 
 
    } 
 
});

<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.)"> 
 
\t <img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" /> 
 
</a>

Answer 2

1つの簡単な方法は、スクロール上の画像をクリックしてくださいをトリガするだろう。

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