Add a thumbnail filmstrip to the photo lightbox.
- Render a horizontally scrollable strip of thumbnails below the image that highlights and auto-centres the active photo and lets you jump straight to any shot. - Pass thumbUrl through from the public and admin galleries, falling back to previewUrl when no thumbnail exists. - Restructure the overlay into a flex column (image area + strip) and require a clearly horizontal gesture before treating a touch as a prev/next swipe, so vertical scrolls no longer trigger navigation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Michilis
co-authored by
Claude Fable 5
Claude Fable 5
parent
9b2668f498
commit
c4094630d9
@@ -149,6 +149,7 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
|
||||
previewUrl: p.urls.preview || p.urls.original,
|
||||
downloadUrl: p.urls.original,
|
||||
filename: p.originalFilename,
|
||||
thumbUrl: p.urls.thumb,
|
||||
}));
|
||||
|
||||
const title = es && gallery.titleEs ? gallery.titleEs : gallery.title;
|
||||
|
||||
@@ -266,6 +266,7 @@ export default function AdminGalleryDetailPage() {
|
||||
previewUrl: p.urls.preview || p.urls.original,
|
||||
downloadUrl: p.urls.original,
|
||||
filename: p.originalFilename,
|
||||
thumbUrl: p.urls.thumb,
|
||||
}));
|
||||
const openLightboxFor = (photoId: string) => {
|
||||
const idx = readyPhotos.findIndex((p) => p.id === photoId);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useCallback, useState } from 'react';
|
||||
import { useEffect, useCallback, useRef, useState } from 'react';
|
||||
import {
|
||||
XMarkIcon,
|
||||
ChevronLeftIcon,
|
||||
@@ -13,6 +13,8 @@ export interface LightboxItem {
|
||||
previewUrl: string;
|
||||
downloadUrl: string;
|
||||
filename?: string;
|
||||
/** Small thumbnail for the filmstrip; falls back to previewUrl. */
|
||||
thumbUrl?: string;
|
||||
}
|
||||
|
||||
interface LightboxProps {
|
||||
@@ -29,8 +31,10 @@ interface LightboxProps {
|
||||
* style of the admin gallery preview modal (fixed inset-0 bg-black/90).
|
||||
*/
|
||||
export default function Lightbox({ items, index, onClose, onNavigate, renderActions }: LightboxProps) {
|
||||
const [touchStartX, setTouchStartX] = useState<number | null>(null);
|
||||
const touchStart = useRef<{ x: number; y: number } | null>(null);
|
||||
const activeThumbRef = useRef<HTMLButtonElement | null>(null);
|
||||
const item = items[index];
|
||||
const hasMultiple = items.length > 1;
|
||||
|
||||
const prev = useCallback(() => {
|
||||
onNavigate(index > 0 ? index - 1 : items.length - 1);
|
||||
@@ -53,19 +57,33 @@ export default function Lightbox({ items, index, onClose, onNavigate, renderActi
|
||||
};
|
||||
}, [onClose, prev, next]);
|
||||
|
||||
// Keep the active thumbnail centred in the filmstrip as you navigate.
|
||||
useEffect(() => {
|
||||
activeThumbRef.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
block: 'nearest',
|
||||
});
|
||||
}, [index]);
|
||||
|
||||
if (!item) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
|
||||
className="fixed inset-0 bg-black/90 z-50 flex flex-col"
|
||||
onClick={onClose}
|
||||
onTouchStart={(e) => setTouchStartX(e.touches[0].clientX)}
|
||||
onTouchStart={(e) => {
|
||||
touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
if (touchStartX === null) return;
|
||||
const dx = e.changedTouches[0].clientX - touchStartX;
|
||||
if (dx > 60) prev();
|
||||
if (dx < -60) next();
|
||||
setTouchStartX(null);
|
||||
if (touchStart.current === null) return;
|
||||
const dx = e.changedTouches[0].clientX - touchStart.current.x;
|
||||
const dy = e.changedTouches[0].clientY - touchStart.current.y;
|
||||
touchStart.current = null;
|
||||
// Only treat as a swipe when it's clearly horizontal.
|
||||
if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy)) return;
|
||||
if (dx > 0) prev();
|
||||
else next();
|
||||
}}
|
||||
>
|
||||
<button
|
||||
@@ -91,47 +109,84 @@ export default function Lightbox({ items, index, onClose, onNavigate, renderActi
|
||||
{renderActions?.(item, index)}
|
||||
</div>
|
||||
|
||||
{items.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
className="absolute left-2 md:left-4 text-white/80 hover:text-white z-10 p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
prev();
|
||||
}}
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ChevronLeftIcon className="w-9 h-9" />
|
||||
</button>
|
||||
<button
|
||||
className="absolute right-2 md:right-4 text-white/80 hover:text-white z-10 p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
next();
|
||||
}}
|
||||
aria-label="Next"
|
||||
>
|
||||
<ChevronRightIcon className="w-9 h-9" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{/* Main image area */}
|
||||
<div className="relative flex-1 min-h-0 flex items-center justify-center">
|
||||
{hasMultiple && (
|
||||
<>
|
||||
<button
|
||||
className="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white z-10 p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
prev();
|
||||
}}
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ChevronLeftIcon className="w-9 h-9" />
|
||||
</button>
|
||||
<button
|
||||
className="absolute right-2 md:right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white z-10 p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
next();
|
||||
}}
|
||||
aria-label="Next"
|
||||
>
|
||||
<ChevronRightIcon className="w-9 h-9" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={item.previewUrl}
|
||||
alt=""
|
||||
className="max-w-[95vw] max-h-[90vh] object-contain select-none"
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={item.previewUrl}
|
||||
alt=""
|
||||
className="max-w-[95vw] max-h-full object-contain select-none"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Counter + thumbnail filmstrip you can skip through. */}
|
||||
<div
|
||||
className="shrink-0 pb-3 pt-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-3 inset-x-0 text-center text-white/70 text-sm">
|
||||
{index + 1} / {items.length}
|
||||
onTouchStart={(e) => e.stopPropagation()}
|
||||
onTouchEnd={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="text-center text-white/70 text-sm mb-2">
|
||||
{index + 1} / {items.length}
|
||||
</div>
|
||||
{hasMultiple && (
|
||||
<div className="flex gap-2 overflow-x-auto px-4 pb-1 justify-start sm:justify-center [scrollbar-width:thin]">
|
||||
{items.map((it, i) => (
|
||||
<button
|
||||
key={it.id}
|
||||
ref={i === index ? activeThumbRef : null}
|
||||
onClick={() => onNavigate(i)}
|
||||
aria-label={`Photo ${i + 1}`}
|
||||
aria-current={i === index}
|
||||
className={`relative shrink-0 overflow-hidden rounded transition ${
|
||||
i === index
|
||||
? 'ring-2 ring-white opacity-100'
|
||||
: 'opacity-50 hover:opacity-90'
|
||||
}`}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={it.thumbUrl || it.previewUrl}
|
||||
alt=""
|
||||
className="h-14 w-14 sm:h-16 sm:w-16 object-cover"
|
||||
draggable={false}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preload neighbours so prev/next feels instant. */}
|
||||
<div className="hidden" aria-hidden>
|
||||
{items.length > 1 && (
|
||||
{hasMultiple && (
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={items[(index + 1) % items.length].previewUrl} alt="" />
|
||||
|
||||
Reference in New Issue
Block a user