feat(gallery): fullscreen carousel modal
This commit is contained in:
@@ -1,19 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
const images = [
|
||||
"https://picsum.photos/640/640?random=1",
|
||||
"https://picsum.photos/640/800?random=2",
|
||||
"https://picsum.photos/800/640?random=3",
|
||||
"https://picsum.photos/1000/640?random=4",
|
||||
"https://picsum.photos/640/400?random=5",
|
||||
"https://picsum.photos/640/800?random=6",
|
||||
"https://picsum.photos/810/640?random=7",
|
||||
"https://picsum.photos/760/640?random=8",
|
||||
"https://picsum.photos/640/900?random=9",
|
||||
"https://picsum.photos/1000/640?random=10",
|
||||
"https://picsum.photos/640/600?random=11",
|
||||
type ImageMetadata = {
|
||||
url: string;
|
||||
date: string;
|
||||
camera: string;
|
||||
lens: string;
|
||||
settings?: {
|
||||
aperture?: string;
|
||||
shutter?: string;
|
||||
iso?: string;
|
||||
focalLength?: string;
|
||||
};
|
||||
};
|
||||
|
||||
const images: ImageMetadata[] = [
|
||||
{
|
||||
url: "https://picsum.photos/640/640?random=1",
|
||||
date: "March 7, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/800?random=2",
|
||||
date: "March 8, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/800/640?random=3",
|
||||
date: "March 10, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/1000/640?random=4",
|
||||
date: "March 12, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/400?random=5",
|
||||
date: "March 15, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/800?random=6",
|
||||
date: "March 18, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/810/640?random=7",
|
||||
date: "March 20, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/760/640?random=8",
|
||||
date: "March 22, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/900?random=9",
|
||||
date: "March 25, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/1000/640?random=10",
|
||||
date: "March 28, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/600?random=11",
|
||||
date: "March 30, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const columnCount = ref(3);
|
||||
const isModalOpen = ref(false);
|
||||
const currentImageIndex = ref(0);
|
||||
|
||||
const currentImage = computed(() => images[currentImageIndex.value]!);
|
||||
|
||||
const getColumnImages = (columnNumber: number) =>
|
||||
images.filter((_, index) => index % columnCount.value === columnNumber - 1);
|
||||
@@ -28,19 +166,54 @@ const updateColumns = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = (image: ImageMetadata) => {
|
||||
const index = images.indexOf(image);
|
||||
if (index !== -1) {
|
||||
currentImageIndex.value = index;
|
||||
isModalOpen.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
isModalOpen.value = false;
|
||||
};
|
||||
|
||||
const nextImage = () => {
|
||||
currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
|
||||
};
|
||||
|
||||
const prevImage = () => {
|
||||
currentImageIndex.value =
|
||||
(currentImageIndex.value - 1 + images.length) % images.length;
|
||||
};
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (!isModalOpen.value) return;
|
||||
|
||||
if (event.key === "Escape") {
|
||||
closeModal();
|
||||
} else if (event.key === "ArrowRight") {
|
||||
nextImage();
|
||||
} else if (event.key === "ArrowLeft") {
|
||||
prevImage();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateColumns();
|
||||
window.addEventListener("resize", updateColumns);
|
||||
window.addEventListener("keydown", handleKeydown);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", updateColumns);
|
||||
window.removeEventListener("keydown", handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono,monospace]"
|
||||
class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono]"
|
||||
>
|
||||
<div class="flex gap-6">
|
||||
<div
|
||||
@@ -70,14 +243,115 @@ onUnmounted(() => {
|
||||
<div
|
||||
v-for="(image, idx) in getColumnImages(col)"
|
||||
:key="idx"
|
||||
class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
|
||||
class="relative overflow-hidden rounded-sm bg-black cursor-pointer"
|
||||
@click="openModal(image)"
|
||||
>
|
||||
<img
|
||||
:src="image"
|
||||
:src="image.url"
|
||||
class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="isModalOpen"
|
||||
class="fixed inset-0 z-50 flex items-center font-[JetBrains_Mono] justify-center bg-black/95 backdrop-blur-sm"
|
||||
@click="closeModal"
|
||||
>
|
||||
<!-- close -->
|
||||
<UButton
|
||||
icon="i-lucide-x"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:ui="{ leadingIcon: 'size-8' }"
|
||||
class="absolute top-6 right-6 z-10"
|
||||
aria-label="Close modal"
|
||||
@click="closeModal"
|
||||
/>
|
||||
|
||||
<!-- previous -->
|
||||
<UButton
|
||||
icon="i-lucide-chevron-left"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:ui="{ leadingIcon: 'size-8' }"
|
||||
class="absolute left-6 z-10 hidden md:block"
|
||||
aria-label="Previous image"
|
||||
@click.stop="prevImage"
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center gap-3 max-w-[95vw] max-h-[90vh] px-4 md:px-20"
|
||||
@click.stop
|
||||
>
|
||||
<img
|
||||
:key="currentImageIndex"
|
||||
:src="currentImage.url"
|
||||
class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
|
||||
alt="Gallery image"
|
||||
/>
|
||||
|
||||
<!-- metadata -->
|
||||
<div
|
||||
class="bg-black px-4 py-2 text-sm text-white flex flex-wrap items-center justify-center gap-2"
|
||||
>
|
||||
<span>{{ currentImage.date }}</span>
|
||||
<span class="text-white/50">|</span>
|
||||
<span>{{ currentImage.camera }}</span>
|
||||
<span class="text-white/50">|</span>
|
||||
<span>{{ currentImage.lens }}</span>
|
||||
<template v-if="currentImage.settings">
|
||||
<span class="text-white/50">|</span>
|
||||
<span v-if="currentImage.settings.aperture">{{
|
||||
currentImage.settings.aperture
|
||||
}}</span>
|
||||
<span v-if="currentImage.settings.shutter">{{
|
||||
currentImage.settings.shutter
|
||||
}}</span>
|
||||
<span v-if="currentImage.settings.iso"
|
||||
>ISO {{ currentImage.settings.iso }}</span
|
||||
>
|
||||
<span v-if="currentImage.settings.focalLength">{{
|
||||
currentImage.settings.focalLength
|
||||
}}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- next -->
|
||||
<UButton
|
||||
icon="i-lucide-chevron-right"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:ui="{ leadingIcon: 'size-8' }"
|
||||
class="absolute right-6 z-10 hidden md:block"
|
||||
aria-label="Next image"
|
||||
@click.stop="nextImage"
|
||||
/>
|
||||
|
||||
<!-- TODO: mobile navigation (use md:hidden) -->
|
||||
|
||||
<div
|
||||
class="absolute bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-sm"
|
||||
>
|
||||
{{ currentImageIndex + 1 }} / {{ images.length }}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user