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