768 && scale > 1 && startDrag($event)"
@mousemove="window.innerWidth > 768 && scale > 1 && onDrag($event)"
@mouseup="endDrag()"
@mouseleave="endDrag()"
@touchstart="window.innerWidth > 768 && scale > 1 && startDrag($event.touches[0])"
@touchmove="window.innerWidth > 768 && scale > 1 && onDrag($event.touches[0])"
@touchend="endDrag()"
@keydown.escape.window="closeFullscreen()"
x-init="
let startY = 0;
let lastOffset = 0;
$el.addEventListener('wheel', e => {
e.preventDefault();
e.deltaY > 0 ? nextImage() : prevImage();
}, { passive: false });
$el.addEventListener('touchstart', e => {
startY = e.touches[0].clientY;
lastOffset = 0;
});
$el.addEventListener('touchmove', e => {
const currentY = e.touches[0].clientY;
const diff = currentY - startY;
const threshold = $el.clientHeight / totalImages;
const offset = Math.round(diff / threshold);
if (offset !== lastOffset) {
let newIndex = currentImage - offset;
if (newIndex < 0) newIndex = 0;
if (newIndex > totalImages - 1) newIndex = totalImages - 1;
changeImage(newIndex);
lastOffset = offset;
}
});
">