1) {
lightbox.isDragging = true;
lightbox.dragStartX = $event.clientX;
lightbox.dragStartY = $event.clientY;
lightbox.lastPanX = lightbox.panX;
lightbox.lastPanY = lightbox.panY;
}
"
@mousemove="
if (lightbox.isDragging && lightbox.zoom > 1) {
const deltaX = $event.clientX - lightbox.dragStartX;
const deltaY = $event.clientY - lightbox.dragStartY;
const maxPan = (lightbox.zoom - 1) * 250;
lightbox.panX = Math.min(maxPan, Math.max(-maxPan, lightbox.lastPanX + deltaX));
lightbox.panY = Math.min(maxPan, Math.max(-maxPan, lightbox.lastPanY + deltaY));
}
"
@mouseup="lightbox.isDragging = false"
@mouseleave="lightbox.isDragging = false"
@dblclick.prevent="
if (lightbox.zoom === 1) {
lightbox.zoom = 2.5;
} else {
lightbox.zoom = 1;
lightbox.panX = 0;
lightbox.panY = 0;
}
"
@wheel.prevent="
const delta = $event.deltaY > 0 ? -0.3 : 0.3;
const newZoom = Math.min(4, Math.max(1, lightbox.zoom + delta));
lightbox.zoom = newZoom;
if (lightbox.zoom === 1) {
lightbox.panX = 0;
lightbox.panY = 0;
}
"
@touchstart.passive="
if ($event.touches.length === 2) {
const dx = $event.touches[0].clientX - $event.touches[1].clientX;
const dy = $event.touches[0].clientY - $event.touches[1].clientY;
lightbox.initialDistance = Math.sqrt(dx * dx + dy * dy);
lightbox.initialZoom = lightbox.zoom;
} else if ($event.touches.length === 1) {
lightbox.touchStartX = $event.touches[0].clientX;
lightbox.touchStartY = $event.touches[0].clientY;
lightbox.lastPanX = lightbox.panX;
lightbox.lastPanY = lightbox.panY;
lightbox.isDragging = true;
const now = Date.now();
if (now - lightbox.lastTap < 300) {
if (lightbox.zoom === 1) {
lightbox.zoom = 2.5;
} else {
lightbox.zoom = 1;
lightbox.panX = 0;
lightbox.panY = 0;
}
}
lightbox.lastTap = now;
}
"
@touchmove.prevent="
if ($event.touches.length === 2) {
const dx = $event.touches[0].clientX - $event.touches[1].clientX;
const dy = $event.touches[0].clientY - $event.touches[1].clientY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (lightbox.initialDistance > 0) {
const scale = distance / lightbox.initialDistance;
lightbox.zoom = Math.min(4, Math.max(1, lightbox.initialZoom * scale));
if (lightbox.zoom === 1) {
lightbox.panX = 0;
lightbox.panY = 0;
}
}
} else if ($event.touches.length === 1 && lightbox.zoom > 1) {
const deltaX = $event.touches[0].clientX - lightbox.touchStartX;
const deltaY = $event.touches[0].clientY - lightbox.touchStartY;
const maxPan = (lightbox.zoom - 1) * 250;
lightbox.panX = Math.min(maxPan, Math.max(-maxPan, lightbox.lastPanX + deltaX));
lightbox.panY = Math.min(maxPan, Math.max(-maxPan, lightbox.lastPanY + deltaY));
}
"
@touchend="
if (lightbox.zoom === 1 && $event.changedTouches.length === 1) {
const touchEndX = $event.changedTouches[0].clientX;
const diff = lightbox.touchStartX - touchEndX;
if (Math.abs(diff) > 50) {
if (diff > 0 && lightbox.currentIndex < lightbox.images.length - 1) {
lightbox.currentIndex++;
} else if (diff < 0 && lightbox.currentIndex > 0) {
lightbox.currentIndex--;
}
}
}
lightbox.initialDistance = 0;
lightbox.isDragging = false;
"
>