From 9e4435e5128ade03e1c8eb924fd027781a545fbf Mon Sep 17 00:00:00 2001 From: Michael Winter Date: Sat, 7 Mar 2026 17:41:49 +0100 Subject: [PATCH] Fix modal to open at clicked image instead of first image --- components/IconButton.vue | 2 +- components/ImageSlider.vue | 3 ++- components/IndexContent.vue | 6 ++++-- layouts/default.vue | 2 +- pages/about.vue | 2 +- pages/albums.vue | 2 +- pages/pieces.vue | 2 +- pages/works/[slug].vue | 2 +- stores/ModalStore.js | 5 +++-- 9 files changed, 15 insertions(+), 11 deletions(-) diff --git a/components/IconButton.vue b/components/IconButton.vue index 1e8cf2f..d898bb6 100644 --- a/components/IconButton.vue +++ b/components/IconButton.vue @@ -84,7 +84,7 @@ } else if (type === 'video') { modalStore.setModalProps('video', 'aspect-video', true, '', '', props.work.vimeo_trackid) } else if (type === 'image') { - modalStore.setModalProps('image', 'aspect-auto', true, 'images', props.work.gallery, '', '', props.work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '') + modalStore.setModalProps('image', 'aspect-auto', true, 'images', props.work.gallery, '', '', props.work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '', '', 0) } if (slug && typeof window !== 'undefined') { diff --git a/components/ImageSlider.vue b/components/ImageSlider.vue index 1ecf818..bab618c 100644 --- a/components/ImageSlider.vue +++ b/components/ImageSlider.vue @@ -4,6 +4,7 @@ :loop="true" :spaceBetween="30" :centeredSlides="true" + :initialSlide="initialIndex" :autoplay="{ delay: 4000, disableOnInteraction: false, @@ -33,6 +34,6 @@ diff --git a/components/IndexContent.vue b/components/IndexContent.vue index ecbff0c..3bafdb2 100644 --- a/components/IndexContent.vue +++ b/components/IndexContent.vue @@ -196,7 +196,7 @@ } const openAlbumModal = (album) => { - modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '') + modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '', '', '', '', 0) } const openModalFromHash = () => { @@ -233,7 +233,9 @@ work.gallery, '', '', - work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '' + work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '', + '', + 0 ) } } diff --git a/layouts/default.vue b/layouts/default.vue index 595c633..b8f3832 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -69,7 +69,7 @@ - +
diff --git a/pages/about.vue b/pages/about.vue index eb4065b..dd833ac 100644 --- a/pages/about.vue +++ b/pages/about.vue @@ -66,7 +66,7 @@ const modalStore = useModalStore() const { data: gallery } = await useFetch('/api/my_image_gallery') const openImageModal = (index) => { - modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '') + modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index) } useHead({ diff --git a/pages/albums.vue b/pages/albums.vue index 517b166..14a3d85 100644 --- a/pages/albums.vue +++ b/pages/albums.vue @@ -53,7 +53,7 @@ const { data: releases } = await useFetch('/api/releases', { }) const openAlbumModal = (album) => { - modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '') + modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '', '', '', '', 0) } useHead({ diff --git a/pages/pieces.vue b/pages/pieces.vue index e6e393a..e2580e3 100644 --- a/pages/pieces.vue +++ b/pages/pieces.vue @@ -88,7 +88,7 @@ const openVideoModal = (vimeoId) => { const openImageModal = (work) => { const gallery = work.images.map(img => ({ image: img.filename })) - modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '') + modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0) } const worksWithImages = computed(() => { diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue index c000e9b..26ec6ad 100644 --- a/pages/works/[slug].vue +++ b/pages/works/[slug].vue @@ -136,7 +136,7 @@ const navItems = computed(() => { }) const openImageModal = (index) => { - modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '') + modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index) } useHead({ diff --git a/stores/ModalStore.js b/stores/ModalStore.js index 1323320..d7fe5ba 100644 --- a/stores/ModalStore.js +++ b/stores/ModalStore.js @@ -1,9 +1,9 @@ import {defineStore} from "pinia"; export const useModalStore = defineStore("ModalStore", { - state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": ""}), + state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": "", "initialIndex": 0}), actions: { - setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl) { + setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl, initialIndex = 0) { this.type = type this.aspect = aspect this.isOpen = isOpen @@ -13,6 +13,7 @@ export const useModalStore = defineStore("ModalStore", { this.pdfUrl = pdfUrl this.soundcloudUrl = soundcloudUrl this.iframeUrl = iframeUrl + this.initialIndex = initialIndex } } }) \ No newline at end of file