3

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!

jkythc
  • 420
  • 3
  • 12
  • What exactly do you mean by “mobile drag up”? Do you actually mean an upwards swipe motion or something like that? – CBroe Nov 03 '17 at 08:43
  • @CBroe Yes, you can using mobile to view the jsfiddle link, and try to swipe up overlay area, the fancybox will close even "touch" option set to false. – jkythc Nov 03 '17 at 08:54
  • `touch` option seems to control whether you can navigate to previous/next items by swiping only, but not affect closing behavior. I guess you could try and catch the event that swiping up causes and cancel it in the `beforeClose` handler fancybox provides. Not sure though whether inside that the information what the event causing it to close is available; if not, you might need to use your own event handler to catch that, and then set a flag or something that you can then check for in beforeClose. Would probably have to re-set that flag based on a timer as well ... – CBroe Nov 03 '17 at 09:06
  • why community give downvote without checking answer...? my answer is correct. – ankita patel Nov 03 '17 at 09:08
  • @jkythc Please check my answer. – ankita patel Nov 03 '17 at 09:10

3 Answers3

2

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>
ankita patel
  • 4,201
  • 1
  • 13
  • 28
  • maybe my question not clear, I mean swipe up the overlay black area and it is still close the popup.. – jkythc Nov 03 '17 at 09:53
  • In your fiddle popup close when i swipe up and in my fiddle without click on close button popup do not closed and i think you want like this. – ankita patel Nov 03 '17 at 09:56
1

This is how you can disable vertical dragging:

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

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

Janis
  • 8,593
  • 1
  • 21
  • 27
  • It is a long story, but here it is how to make it work - https://jsfiddle.net/0Lg41w6s/ – Janis Nov 03 '17 at 10:04
  • btw, I have updated the first demo, this works in v3.2. – Janis Nov 03 '17 at 11:38
  • @Janis would you be able to add any more information on how you resolved it? I've the same issue where content displayed with Fancybox is closing when being viewed on an Android device. I can't set touch vertical to false as the content needs to scroll - but when I do scroll, it closes! Thanks in advance. – Frank Furter Nov 29 '18 at 16:26
0

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

Hackuchino
  • 1
  • 1