Svelte Image Gallery

A Masonry-Like Image Container for Svelte

#repl #svelte #gallery

Want a Svelte site built?

Hire a Svelte developer

Demo Download

svelte-image-gallery

A Masonry-Like Image Container for Svelte

See On REPL

Traditional	svelte-image-gallery
![traditional][ss1]	![svelte-image-gallery][ss2]
Made responsive via media queries or [minmax/autofit][minmax]	Responsive out of the box

Installation

npm install --save-dev svelte-image-gallery

Usage

<script>
    import Gallery from 'svelte-image-gallery'

    function handleClick(e) {
        console.log(e.detail.src)
    }
</script>

<Gallery on:click={handleClick}>
    <img src="..." />
    <img src="..." />
    ...
</Gallery>

Running Locally

Clone the repository
Open example folder in terminal
Run npm i, then npm run dev

Parameters

Parameter	Default	Description	Unit
gap	10	Grid Gap Between Items	px
maxColumnWidth	250	Maximum Column Width	px
hover	false	Enlarge Image on Hover	bool
loading	eager	Image Loading Type	mdn

To access the image url on click, use the on:click directive in the Gallery component.

Created By Berkin AKKAYA

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Want a Svelte site built?

Hire a Svelte developer