ファンシーボックス3 - moblieビューのスワイプアップやオーバーレイエリアのクローズを防ぐ

Question

私はファンシーボックスを閉じるようにしようとしていますが、閉じるボタンで閉じることができます。私はfancyBox3のドキュメントを見ているが、まだ考えていない。ファンシーボックスのデフォルト設定では、マウスのクリックが外に閉じたり、マウスのタッチが閉じたりするのを防ぐことができます。タッチ設定をfalseに設定したり、スワイプしたり、オーバーレイ領域をクリックしたりすると、モバイルビューで問題が発生します。

私は、ファンシーボックスを表示するためのサンプルスクリプトを用意しています。

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

は間近モバイルスワイプを防止するための任意のアイデア？ありがとう！

Answer 1

これを試してください。 touch: falseの代わりに"touch":falseを付けてください。

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

<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>

Answer 2

これは、垂直ドラッグを無効にする方法です。

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

がデモ - https://codepen.io/anon/pen/bYEQmM