Я добавил jQuery Panzoom в свой проект. Я показываю изображение в полноэкранном режиме и хочу, чтобы пользователь мог увеличить это изображение на устройствах iOS. Панорамирование работает, но масштабирование - нет, и я не знаю почему. Он также не работает в мониторе отладки Chrome, когда включено моделирование устройства.
Даже с демонстрациями масштабирование с помощью пинча не работает. Плагин сломан, или я тупой?
https://github.com/timmywil/panzoom
Я создаю div, который динамически содержит изображение.
zoomThumb: function (d, e) {
let $imgPopup = $('<div>').addClass('fullScreenImage').appendTo($('body')).fadeIn();
let $panzoom = $('<img>').attr('src', d.src.replace('Thumb/', '')).appendTo($imgPopup);
$panzoom.panzoom({ disableZoom: false});
// Mouse wheel zoom
$imgPopup.on('mousewheel.focal', function (e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
animate: false,
focal: e
});
});
// Close button
$('<div>').append($('<i>').addClass('fa').addClass('fa-times')).appendTo($imgPopup).click(function () {
$imgPopup.fadeOut({ done: () => { $imgPopup.remove(); } });
});
e.stopPropagation();
}
.fullScreenImage {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
display: none;
}
.fullScreenImage > img {
margin: auto;
display: block;
width: 80%;
}
.fullScreenImage > div {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.fullScreenImage > div:hover,
.fullScreenImage > div:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
Знаете ли вы, как решить эту проблему?