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') { } else if (type === 'video') {
modalStore.setModalProps('video', 'aspect-video', true, '', '', props.work.vimeo_trackid) modalStore.setModalProps('video', 'aspect-video', true, '', '', props.work.vimeo_trackid)
} else if (type === 'image') { } 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') { if (slug && typeof window !== 'undefined') {

3
components/ImageSlider.vue
View file

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

6
components/IndexContent.vue
View file

@ -196,7 +196,7 @@
} }
const openAlbumModal = (album) => { 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 = () => { const openModalFromHash = () => {
@ -233,7 +233,9 @@
work.gallery, 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'"> <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
<ModalBody :class="modalStore.aspect"> <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"> <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
<ClientOnly> <ClientOnly>
<iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe> <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 { data: gallery } = await useFetch('/api/my_image_gallery')
const openImageModal = (index) => { const openImageModal = (index) => {
modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '') modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index)
} }
useHead({ useHead({

2
pages/albums.vue
View file

@ -53,7 +53,7 @@ const { data: releases } = await useFetch('/api/releases', {
}) })
const openAlbumModal = (album) => { 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({ useHead({

2
pages/pieces.vue
View file

@ -88,7 +88,7 @@ const openVideoModal = (vimeoId) => {
const openImageModal = (work) => { const openImageModal = (work) => {
const gallery = work.images.map(img => ({ image: img.filename })) 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(() => { const worksWithImages = computed(() => {

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

@ -136,7 +136,7 @@ const navItems = computed(() => {
}) })
const openImageModal = (index) => { const openImageModal = (index) => {
modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '') modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index)
} }
useHead({ useHead({

5
stores/ModalStore.js
View file

@ -1,9 +1,9 @@
import {defineStore} from "pinia"; import {defineStore} from "pinia";
export const useModalStore = defineStore("ModalStore", { 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: { 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.type = type
this.aspect = aspect this.aspect = aspect
this.isOpen = isOpen this.isOpen = isOpen
@ -13,6 +13,7 @@ export const useModalStore = defineStore("ModalStore", {
this.pdfUrl = pdfUrl this.pdfUrl = pdfUrl
this.soundcloudUrl = soundcloudUrl this.soundcloudUrl = soundcloudUrl
this.iframeUrl = iframeUrl this.iframeUrl = iframeUrl
this.initialIndex = initialIndex
} }
} }
}) })