CODEWITHSUNDEEP
jquerycssfancybox-3
jkythc
jkythc

Reputation: 430

Fancybox 3 - prevent moblie view swipe up or click overlay area close

I am trying to make a fancybox only can close by close button. I have looked the fancyBox3 documentation but still no idea. The fancybox default setting only can prevent mouse click outside close and mouse touch close. Even the touch setting set to false, swipe up or click overlay area close problem still happen on mobile view.

I have a sample script to show the fancybox.

HTML

<div id="fancybox" style="display:none;">
  <img src="https://farm6.staticflickr.com/5519/9432166677_61aa7e7f90_m_d.jpg">
</div>

JS

$(document).ready(function() {
    $.fancybox.open({
    src: "#fancybox",
    type: "inline",
    clickSlide : 'false',
    clickOutside : 'false',
    touch: false            
  });
});

JSFIDDLE

Any idea to prevent mobile swipe up close? Thanks!

Upvotes: 3

Views: 7431

Answers (3)

Hackuchino
Hackuchino

Reputation: 1

I had this problem, you need add options for mobile devices

    $.fancybox.open({
        src: '#order-popup-desktop',
        type: 'inline',
        mobile: {
            clickSlide: false,
            touch: false
        },
    });

This code 100% work for fancy v.3.5.7

Upvotes: 0

Janis
Janis

Reputation: 8769

This is how you can disable vertical dragging:

$('[data-fancybox="images"]').fancybox({
  touch: {
    vertical: false
  }
});

Demo - https://codepen.io/anon/pen/bYEQmM

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Try this. Give "touch":false instead of touch: false.

$(document).ready(function() {  
  $.fancybox.open({
    src: "#fancybox",
    type: "inline",
    clickSlide : 'false',
    clickOutside : 'false',
    "touch":false	
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet"/>

<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.1.25/jquery.fancybox.min.js"></script>

<div id="fancybox" style="display:none;">
  <img src="https://farm6.staticflickr.com/5519/9432166677_61aa7e7f90_m_d.jpg">
</div>

Upvotes: 2

Related Questions