CODEWITHSUNDEEP
javascriptjqueryhtmlcssfancybox
Ram kumar
Ram kumar

Reputation: 3162

Need to open fancybox content on page scroll instead of click somewhere

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>

Upvotes: 0

Views: 520

Answers (2)

phuwin
phuwin

Reputation: 3260

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>

Upvotes: 1

xeno
xeno

Reputation: 42

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")
})

Upvotes: 0

Related Questions