A masonry-like image gallery component for svelte
npm install svelte-brick-gallery
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 | 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 |
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}/>
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.
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.
Distributed under the MIT License