diff --git a/design/lightbox-mockup.html b/design/lightbox-mockup.html index c303ca6..27b21d7 100644 --- a/design/lightbox-mockup.html +++ b/design/lightbox-mockup.html @@ -238,7 +238,11 @@ function show(i,dir){ } /* ===== 缩放:滚轮锚点 / 双击 / 双指 / 拖拽(复用线上 v2 数学) ===== */ -function applyZoom(){pic.style.transform=`translate(${zoom.tx}px,${zoom.ty}px) scale(${zoom.s})`; +function clampPan(){const mx=Math.max(0,pic.clientWidth*(zoom.s-1)/2), + my=Math.max(0,pic.clientHeight*(zoom.s-1)/2); + zoom.tx=Math.min(mx,Math.max(-mx,zoom.tx));zoom.ty=Math.min(my,Math.max(-my,zoom.ty));} +function applyZoom(){clampPan(); + pic.style.transform=zoom.s===1?'none':`translate(${zoom.tx}px,${zoom.ty}px) scale(${zoom.s})`; pic.classList.toggle('zoomed',zoom.s!==1); lbx.classList.toggle('clean',zoom.s!==1);} function instantResetZoom(){const keep=pic.style.transition;pic.style.transition='none'; @@ -246,7 +250,7 @@ function instantResetZoom(){const keep=pic.style.transition;pic.style.transition lbx.classList.remove('clean');void pic.offsetWidth;pic.style.transition=keep||'';} function zoomAt(next,cx,cy){const r=pic.getBoundingClientRect(); const ax=cx-r.left-r.width/2-zoom.tx,ay=cy-r.top-r.height/2-zoom.ty; - const k=next/zoom.s;zoom.tx-=ax*(k-1);zoom.ty-=ay*(k-1);zoom.s=next;applyZoom();zindShow();} + if(next<=1){zoom={s:1,tx:0,ty:0};applyZoom();zindShow();return;}const k=next/zoom.s;zoom.tx-=ax*(k-1);zoom.ty-=ay*(k-1);zoom.s=next;applyZoom();zindShow();} let zt;function zindShow(){const z=$('zind');z.textContent=Math.round(zoom.s*100)+'%'; z.classList.add('show');clearTimeout(zt);zt=setTimeout(()=>z.classList.remove('show'),900);} lbx.addEventListener('wheel',e=>{if(!open_)return;e.preventDefault(); diff --git a/src/components/pages/GalleryPage.astro b/src/components/pages/GalleryPage.astro index ed6940c..a4c0f1c 100644 --- a/src/components/pages/GalleryPage.astro +++ b/src/components/pages/GalleryPage.astro @@ -51,6 +51,7 @@ const cards = await Promise.all( return { group: photo.data.group, title: photo.data.title, + caption: photo.data.caption ?? '', alt: photo.data.alt ?? photo.data.title, image: photo.data.image, exif: formatExif(photo.data.exif), @@ -92,9 +93,12 @@ const first = cards[0]; type="button" class="shot-btn" data-title={card.title} + data-caption={card.caption} data-exif={card.exif} data-full={card.fullSrc} data-original={card.original} + data-w={card.w} + data-h={card.h} aria-label={t('gallery_view_aria', locale).replace('{title}', card.title) + (card.exif ? t('gallery_view_aria_exif', locale).replace('{exif}', card.exif) : '')} > @@ -130,10 +134,12 @@ const first = cards[0];
- {first?.title} - {first?.exif} - 1 / {cards.length} - +

{first?.caption ?? ''}

+