search

BerkinAKKAYA / svelte-image-gallery

A Masonry-Like Image Container for Svelte
https://madewithsvelte.com/svelte-image-gallery
53 stars 13 forks source link
gallery repl svelte

readme

svelte-image-gallery

MadeWithSvelte.com shield

A Masonry-Like Image Container for Svelte

See On REPL

Traditional svelte-image-gallery
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="https://github.com/BerkinAKKAYA/svelte-image-gallery/raw/master/.." />
    <img src="https://github.com/BerkinAKKAYA/svelte-image-gallery/raw/master/.." />
    ...
</Gallery>

Running Locally

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