https://github.com/BerkinAKKAYA/svelte-image-gallery

A Masonry-Like Image Container for Svelte
https://github.com/BerkinAKKAYA/svelte-image-gallery

gallery repl svelte

Last synced: about 2 months ago
JSON representation

A Masonry-Like Image Container for Svelte

• Host: GitHub
• URL: https://github.com/BerkinAKKAYA/svelte-image-gallery
• Owner: BerkinAKKAYA
• Created: 2020-09-10T12:19:47.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-16T08:14:56.000Z (4 months ago)
• Last Synced: 2024-11-01T07:36:06.072Z (about 2 months ago)
• Topics: gallery, repl, svelte
• Language: Svelte
• Homepage: https://madewithsvelte.com/svelte-image-gallery
• Size: 70.3 KB
• Stars: 53
• Watchers: 3
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-image-gallery

[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/2648-shield.svg)](https://madewithsvelte.com/p/svelte-image-gallery/shield-link)

A Masonry-Like Image Container for Svelte

[See On REPL][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    |

[ss1]: https://i.imgur.com/rTSftEw.jpg

[ss2]: https://i.imgur.com/CpgVaWm.jpg

[minmax]: https://css-tricks.com/intrinsically-responsive-css-grid-with-minmax-and-min

[repl]: https://svelte.dev/repl/29b37509123b4a4bac808531f39d7d9e?version=3.24.1

### Installation

```sh

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

```

### Usage

```svelte

	import Gallery from 'svelte-image-gallery'

	function handleClick(e) {

		console.log(e.detail.src)

	}

	

	

	...

```

### 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) |

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

> Created By [Berkin AKKAYA](https://berkinakkaya.github.io)