Zoom не работает в Swipebox для мобильных устройств - PullRequest
Новая
       40

Zoom не работает в Swipebox для мобильных устройств

0 голосов
/ 19 февраля 2020

Я реализовал галерею Lightbox при разработке Swipebox https://github.com/marian-kadanka/better-swipebox.

Все было хорошо, но проблема в том, что зум не работает. хотя он сказал, что функция масштабирования включена.

Я получаю ошибку, как это- Скриншот ошибки консоли . Текст ошибки -

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 preventDefault @ jquery-1.11.3.min.js:4 dispatch @ jquery-1.11.3.min.js:4 r.handle @ jquery-1.11.3.min.js:4

То, что я сделал на своей странице, приведено ниже - (не могу добавить JS непосредственно здесь, поскольку объем сообщения в сообщении ограничен 30000 символами. )

Основной JS здесь - https://marian-kadanka.github.io/better-swipebox/src/js/jquery.swipebox.js создал ручку для всего кода: https://codepen.io/dmaity/pen/jOPrXjy

$( document ).ready(function() {
			$( '.swipebox' ).swipebox();
});
<link href="https://marian-kadanka.github.io/better-swipebox/demo/normalize.css" rel="stylesheet"/>
    <link href="https://marian-kadanka.github.io/better-swipebox/demo/bagpakk.min.css" rel="stylesheet"/>
    <link href="https://marian-kadanka.github.io/better-swipebox/demo/style.css" rel="stylesheet"/>
    <link href="https://marian-kadanka.github.io/better-swipebox/src/css/swipebox.css" rel="stylesheet"/>



    <section id="exemple" class="container">
    		<div class="wrap small-width">
    			<div id="try"></div>
    			<ul id="box-container">
    				<li class="box">
    					<a href="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?w=1240&h=800" class="swipebox" title="Seaport">
    						<img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?w=1240&h=800" alt="image">
    					</a>
    				</li>
    				<li class="box">
    					<a href="https://images.pexels.com/photos/7976/pexels-photo.jpg?w=1240&h=800" class="swipebox" title="Field">
    						<img src="https://images.pexels.com/photos/7976/pexels-photo.jpg?w=1240&h=800" alt="image">
    					</a>
    				</li>
    				<li class="box">
    <a href="https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80?w=1240&h=800" class="swipebox" title="Field">
    						<img src="https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80?w=1240&h=800" alt="image">
    					</a>
    				</li>
    				<li class="box">
    					<a href="https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?w=1240&h=800" class="swipebox" title="Beach">
    						<img src="https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?w=1240&h=800" alt="image">
    					</a>
    				</li>
    			</ul>
    		</div>
    	</section>




    <script src="https://marian-kadanka.github.io/better-swipebox/lib/ios-orientationchange-fix.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://marian-kadanka.github.io/better-swipebox/src/js/jquery.swipebox.js"></script>
...