0

I am using fancybox. Here it fancybox will display on clicking somewhere but i need to display after page scroll. Now i am looking for fancybox. Anyone can suggest me any plugin like fancybox with scrolling not clicking.

Now i have tried with fancybox so here is code of fancybox. But you can help me with any plugin. 

$(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>
Ram kumar
  • 3,152
  • 6
  • 32
  • 49

2 Answers2

1

Mousewheel event listener taken from this: Get mouse wheel events in jQuery?

I also created a jsFiddle: https://jsfiddle.net/jmL7zgzt/

$(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()
    }
});
<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>
Community
  • 1
  • 1
phuwin
  • 3,130
  • 4
  • 26
  • 49
  • actually, you got something but here is content load and load every scroll. But i need load after one scroll. you can try scroll up and down there will open multiple dialog box – Ram kumar Mar 29 '17 at 10:50
  • You need to have a boolean that checks if the fancybox is opened. – phuwin Mar 29 '17 at 10:51
  • please can you add the script then i will mark right answer – Ram kumar Mar 29 '17 at 10:52
  • I added a condition checking if `html` element has "fancy-enabled" class. @kumar it was a work around. You should dig into their API to see if they have a proper functions or events to check if the `fancybox` is opened. – phuwin Mar 29 '17 at 11:02
  • Would you mark this as your the correct answer? Thanks! – phuwin Mar 29 '17 at 11:30
  • yes, i will after implementation on my project. No worry i will give credit to respective answer – Ram kumar Mar 29 '17 at 11:50
  • hi once again... can you see behavior? http://demo.helloitskumar.com/test/test/test/blank.html when you will scroll first its fine but after scroll twice or frequently its goes to top very hard to get bottom content part while scrolling Please can you help? – Ram kumar Mar 31 '17 at 08:58
  • @Kumar i saw some errors in the console. You can check that. You can create another question for that. It is out of this question's scope. – phuwin Mar 31 '17 at 09:13
  • please i have post there https://stackoverflow.com/questions/43142682/strange-behaviour-while-scrolling-fancybox – Ram kumar Mar 31 '17 at 14:04
  • hope you will help because you have help me to load on scroll too – Ram kumar Mar 31 '17 at 14:05
0

One simple way to stay with your fancybox plugin would be to trigger a click on a image on scroll.

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