search

flekschas / svelte-simple-modal

A simple, small, and content-agnostic modal for Svelte v3 and v4
https://svelte.dev/repl/b95ce66b0ef34064a34afc5c0249f313
MIT License
422 stars 31 forks source link

Modal as photo gallery #74

Closed tonymurray closed 2 years ago

tonymurray commented 2 years ago

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.

tonymurray commented 2 years ago

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!

flekschas commented 2 years ago

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);
tonymurray commented 2 years ago

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!

flekschas commented 2 years ago

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.