mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix modal to open at clicked image instead of first image

Browse source
This commit is contained in:
Michael Winter 2026-03-07 17:41:49 +01:00
parent 5f9ce31127
commit 9e4435e512
9 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/IconButton.vue
View file

@ -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') {

3
components/ImageSlider.vue
View file

@ -4,6 +4,7 @@
:loop="true"
:spaceBetween="30"
:centeredSlides="true"
:initialSlide="initialIndex"
:autoplay="{
delay: 4000,
disableOnInteraction: false,
@ -33,6 +34,6 @@
<script>
export default {
props: ['gallery', 'bucket']
props: ['gallery', 'bucket', 'initialIndex']
}
</script>

6
components/IndexContent.vue
View file

@ -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
)
}
}

2
layouts/default.vue
View file

@ -69,7 +69,7 @@
<Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
<ModalBody :class="modalStore.aspect">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
<div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
<ClientOnly>
<iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>

2
pages/about.vue
View file

@ -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({

2
pages/albums.vue
View file

@ -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({

2
pages/pieces.vue
View file

@ -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(() => {

2
pages/works/[slug].vue
View file

@ -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({

5
stores/ModalStore.js
View file

@ -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
}
}
})