@aphorica/svelte-gallery v0.0.1

Svelte Gallery

This is a basic masonry-style gallery I've put together for my own use. It's very much in development as of now, with no settings possible.

This repository is a complete invocation environment, with an App. The npm install will only include the component.

Caveats

Things jump around a bit on load if you have a bunch of images. One solution might be to put up a 'loading' screen until they've all been read. Another might be to defer this to server-side rendering, but I'm still learning Svelte and am not yet sure how to approach that.

More to come as I need it or as others may request.

Installation

The usual:

npm install -D @aphorica/svelte-gallery or yarn add @aphorica/svelte-gallery

Usage

<script>
import SvelteGallery from '@aphorica/svelte-gallery'

...
const imageUrlList = []  // fill this up with a bunch of image urls
</script>

...
<SvelteGallery imageUrls={imageUrlList}/>

If the imagefiles have an exif 'description' field, it will use that as the caption and title for that image.

Running this demo

Simply clone the repo, cd into the directory and npm install/yarn.

Then run npm run dev or yarn dev. Click on a 'brick' image which will bring up a 'loupe' image. Scrolling or clicking on the image will remove it.

TODOs

I can think of a gazillion things. Depends on the priority stack.