Svelte Brick Gallery

A masonry-like image gallery component for svelte

See the Demo

Installation

npm install svelte-brick-gallery

Usage

The component has an images prop that takes an array of objects with a src property, which contains a path or an url of each image

<script>
  import Gallery from "svelte-brick-gallery";

  // an array of { src } objects
  let images = [{ src: "1.jpg" }, { src: "2.jpg" }, ...];

</script>

<Gallery {images}/>

Props

Props Type Description Default
images array an array of { src } objects containing the path or url of each images to display []
itemWidth number default display width in pixel of an image 300
itemHeight number display height in pixel of an image 200
gap number margin in pixel between images 10
justify string alignment, can be : left, center or right left
delay number duration of an image's loading animation in milliseconds 1000

example 1

If the width and height of the images are known beforehand, include them in the array of objects

<script>
  import Gallery from "svelte-brick-gallery";

  // an array of { src, width, height } objects
  let images = [{src, width, height}];

</script>

<Gallery {images}/>

See the REPL

example 2

An image slot is available if you want to customize the render and interaction of the image.

<script>
  import Gallery from "svelte-brick-gallery";

  // an array of objects with a 'src', 'width' and 'height' properties
  let images = [{src, width, height}];

</script>

<Gallery {images}>
  <div slot="image" let:index let:style let:displayWidth let:displayHeight style="height: 100%;">
    <img src={images[index].src} {style} alt={images[index].width + 'x' + images[index].height}>
  </div>
</Gallery>

let:index: the index of an image inside the array.
let:style: the default style which sets the image to cover the whole area using object-fit: cover; .
let:displayWidth: the rendered width (content and padding) in pixel of the box containing the image.
let:displayHeight: the rendered height in pixel of the box containing the image.

See the REPL

example 3

Two (2) more slots are available : loading and error

<script>
  import Gallery from "svelte-brick-gallery";

  // an array of objects with a 'src', 'width' and 'height' properties
  let images = [{src, width, height}];

</script>

<Gallery {images}>
  <div slot="loading">
    ...loading
  </div>
  <div slot="image" let:index let:style style="height: 100%;">
    <img src={images[index].src} {style} alt={images[index].width + 'x' + images[index].height}>
  </div>
  <div slot="error" let:load let:src>
    <button on:click={() => load(src)}>reload</button>
  </div>
</Gallery>

The loading slot allows to add a custom loading animation for each images.
The error slot allows to display an error message when the image has failed to load and provides a load function that can reload the image.

See the REPL

License

Distributed under the MIT License

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes