svelte-image-gallery

svelte-image-gallery

A Masonry-Like Image Container for Svelte

See On REPL

Traditional	svelte-image-gallery
Made responsive via media queries or minmax/autofit	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