scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Browse Source 
Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-01-30 13:30:58 +00:00
parent 4b39df44bc
commit b9a3e697be
25 changed files with 229 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Lightbox/FullView.tsx
+5 -6
View File
@@ -77,7 +77,7 @@ export default function FullView({
<div className={styles.fullViewImageContainer}>
<AnimatePresence initial={false} custom={animateLeft}>
<motion.div
key={image.imageSizes.medium}
key={image.src}
custom={animateLeft}
variants={variants}
initial="initial"
@@ -89,16 +89,15 @@ export default function FullView({
onDragEnd={(e, info) => handleSwipe(info.offset.x)}
>
<Image
alt={image.metaData.altText}
alt={image.alt}
fill
src={image.imageSizes.medium}
sizes="(min-width: 1500px) 1500px, 100vw"
src={image.src}
style={{ objectFit: "cover" }}
/>
<div className={styles.fullViewFooter}>
{image.metaData.title && (
<Body color="white">{image.metaData.title}</Body>
)}
{image.caption && <Body color="white">{image.caption}</Body>}
</div>
</motion.div>
</AnimatePresence>
components/Lightbox/Gallery.tsx
+14 -13
View File
@@ -79,18 +79,16 @@ export default function Gallery({
{/* Desktop Gallery */}
<div className={styles.desktopGallery}>
<div className={styles.galleryHeader}>
{mainImage.metaData.title && (
{mainImage.caption && (
<div className={styles.imageCaption}>
<Caption color="textMediumContrast">
{mainImage.metaData.title}
</Caption>
<Caption color="textMediumContrast">{mainImage.caption}</Caption>
</div>
)}
</div>
<div className={styles.mainImageWrapper}>
<AnimatePresence initial={false} custom={animateLeft}>
<motion.div
key={mainImage.imageSizes.medium}
key={mainImage.src}
className={styles.mainImageContainer}
custom={animateLeft}
variants={variants}
@@ -100,9 +98,10 @@ export default function Gallery({
transition={{ duration: 0.3 }}
>
<Image
src={mainImage.imageSizes.medium}
alt={mainImage.metaData.altText}
src={mainImage.src}
alt={mainImage.alt}
fill
sizes="(min-width: 1000px) 1000px, 100vw"
className={styles.image}
onClick={onImageClick}
/>
@@ -128,7 +127,7 @@ export default function Gallery({
<AnimatePresence initial={false}>
{getThumbImages().map((image, index) => (
<motion.div
key={image.imageSizes.tiny}
key={image.smallSrc || image.src}
className={styles.thumbnailContainer}
onClick={() => onSelectImage(image)}
initial={{ opacity: 0, x: 50 }}
@@ -137,9 +136,10 @@ export default function Gallery({
transition={{ duration: 0.2, delay: index * 0.05 }}
>
<Image
src={image.imageSizes.tiny}
alt={image.metaData.altText}
src={image.smallSrc || image.src}
alt={image.alt}
fill
sizes="200px"
className={styles.image}
/>
</motion.div>
@@ -154,7 +154,7 @@ export default function Gallery({
<div className={styles.thumbnailGrid}>
{images.map((image, index) => (
<motion.div
key={image.imageSizes.small}
key={image.smallSrc || image.src}
className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
onClick={() => {
onSelectImage(image)
@@ -165,9 +165,10 @@ export default function Gallery({
transition={{ duration: 0.3, delay: index * 0.05 }}
>
<Image
src={image.imageSizes.small}
alt={image.metaData.altText}
src={image.smallSrc || image.src}
alt={image.alt}
fill
sizes="100vw"
className={styles.image}
/>
</motion.div>
components/Lightbox/Lightbox.module.css
+2 -1
View File
@@ -210,7 +210,7 @@
}
}
@media (min-width: 1367px) {
@media (min-width: 768px) {
.mobileGallery,
.thumbnailGrid {
display: none;
@@ -229,6 +229,7 @@
.galleryContent {
width: 1090px;
width: min(var(--max-width-page), 1090px);
height: min(725px, 85dvh);
}
components/Lightbox/index.tsx
+12 -3
View File
@@ -15,17 +15,26 @@ export default function Lightbox({
dialogTitle,
onClose,
isOpen,
activeIndex = 0,
}: LightboxProps) {
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
const [isFullView, setIsFullView] = useState(false)
useEffect(() => {
if (isOpen) {
setSelectedImageIndex(0)
setIsFullView(false)
}
}, [isOpen])
useEffect(() => {
setSelectedImageIndex(activeIndex)
}, [activeIndex])
function handleClose() {
setSelectedImageIndex(0)
onClose()
}
function handleNext() {
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
}
@@ -39,7 +48,7 @@ export default function Lightbox({
return (
<ModalOverlay
isOpen={isOpen}
onOpenChange={onClose}
onOpenChange={handleClose}
className={styles.overlay}
isDismissable
>