Svelte-gallery-view NPM

Svelte Gallery View

A collection of Svalte components for displaying photos, and currently focusing on a component that provides a layout used by Google Photos / 500px.

Screenshot

Features

GalleryView (default)

GalleryView provides a layout used by Google Photos and 500px as what shows in the screenshot above which I think could be used in most scenarios. It displays photos with the same height in each line and keeps the original aspect ratio of each photo.

The implementation was inspired by a post Pure CSS implementation of Google Photos / 500px image layout.

Getting Started

Install the module:

npm install svelte-gallery-view

Import the module:

import GalleryView from 'svelte-gallery-view'

Add GalleryView to your view:

<GalleryView
    photos={photos}
    gutter={2}
    baseHeight={200}
    photoClass="photo"
    onPhotoClick={(photo) => {
        showPhotoDetails(photo.id);
    }}
/>

APIs

GalleryView

Properties

photos (required)

interface Photo {
	/**
 	* URL or the function to retrieve URL of the photo.
    */
	url: string | (() => CancelablePromise<string>);
	/**
 	* Width of the photo.
    */
	width: number;
	/**
 	* Height of the photo.
    */
	height: number;
	/**
 	* Extra information which shown as a tooltip text on the photo.
    */
	title?: string;
	/**
 	* Any properties could be useful in callback function onPhotoClick.
    */
	[key: string]: unknown;
};

//...

photos: Photo[] = [];

baseHeight (optional, default: 200)

/**
/* Base height of each line, in px. The final height of each line
/* would be various because of adjustments.
*/
baseHeight: number = 200;

gutter (optional, default: 2)

/**
/* Gap between every two photos, in px.
*/
gutter: number = 2;

photoClass (optional, default: undefined)

/**
/* Extra class names would be applied to the photo elements.
*/
photoClass: string | undefined;

onPhotoClick (optional, default: undefined)

/**
/* Callback function which handles click events triggered by each photo.
*/
onPhotoClick: ((photo: Photo) => any) | undefined;

Developing

Start SvelteKit:

npm run dev

Edit the component files in src/lib, save it and watch the magic happens.
Navigate to localhost:7070 to see the components live.

Testing

Interaction testing

This is a simple and intuitive method that can be done through Storybook, with the help of Cypress. And example and pre-made test scripts can be found in this repository, and more info can be found in Storybook's docs.