Modal as photo gallery
tonymurray opened this issue · 4 comments
Hello, I am trying to use svelte-simple-modal in order to create a photo gallery type page. Clicking on a particular thumbnail would render a larger version of that photo within the modal. Thumbnails are in regular HTML.
Should this be possible (without creating a separate component for each photograph), by passing the img src attribute into the Modal contents dynamically and rendering a larger version of the photograph in HTML?. Any pointers welcome.
PS. I can achieve this via pure Javascript, but I am currently learning Svelte + components.
On further experimentation, I could achieve this as follows:
In HTML:
<img on:click|preventDefault={showModal} src="media/photo1.jpg">
<img on:click|preventDefault={showModal} src="media/photo2.jpg">
In JS on same page:
const showModal = (ref) => {
const url=ref.srcElement.src
modal.set(bind(Popup,{ message: url }))
};
In Popup.svelte:
Suggestions for improvement/other approaches welcome!
Your approach makes sense. Another general way you can control the image in your popup component is via another Svelte store. E.g.,
image.set(ref.srcElement.src); // Another Svelte store you could use in Popup
modal.set(Popup);Thanks for the info.
I got it to work. Also making {message} an object to pass other attributes (like URL of larger photo verson {message.urlLarge}
I will also explore your suggestion to use a Svelte store!
That's great to hear! I am closing this ticket now. If you run into any issues please re-open it or a new ticket. Cheers.