https://github.com/jsilvermist/sl-gallery

A web-component based hash-route photo gallery.
https://github.com/jsilvermist/sl-gallery

Last synced: 18 days ago
JSON representation

A web-component based hash-route photo gallery.

• Host: GitHub
• URL: https://github.com/jsilvermist/sl-gallery
• Owner: jsilvermist
• License: mit
• Created: 2017-12-17T18:35:04.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-08-06T22:21:13.000Z (over 5 years ago)
• Last Synced: 2024-12-19T18:52:00.923Z (23 days ago)
• Language: JavaScript
• Homepage: https://silverlinkz.net/projects/gallery
• Size: 106 KB
• Stars: 10
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Silverlinkz Photo Gallery

=========================

[![Build Status](https://travis-ci.org/jsilvermist/sl-gallery.svg?branch=master)](https://travis-ci.org/jsilvermist/sl-gallery)

[![Published on npm](https://img.shields.io/npm/v/@silverlinkz/sl-gallery.svg)](https://www.npmjs.com/package/@silverlinkz/sl-gallery)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@silverlinkz/sl-gallery)

A web-component based hash-route photo gallery.

The gallery will load all `small` images for thumbnails in the grid.

When you open the fullscreen slideshow, it will display the small image

as a placeholder while loading the larger full-sized `src` image.

After the current image in the slideshow is loaded, the next and previous images

will be lazy-loaded so that they are immediately ready upon changing image.

Note: Fullscreen won't work in the demo at `webcomponents.org`

due to being inside of a fullscreen restricted iframe.

## Installation (Polymer 3)

```sh

npm install --save @silverlinkz/sl-gallery

```

### Legacy Installation (Polymer 2 / Bower)

```sh

bower install --save jsilvermist/sl-gallery#^1.0.0

```

## Usage

Import the gallery (Polymer 3):

```javascript

import '@silverlinkz/sl-gallery';

```

Legacy import (Polymer 2 / Bower):

```html

```

Create an `sl-gallery` element, and add `sl-gallery-image` elements for each image:

```html

  

  

  

  

  

  

  

  

```

The `small` attribute is used for the thumbnail image and preloading the gallery slideshow image.

If the `small` attribute is missing, the gallery will use the `src` for the thumbnail image.

The `title`, `caption`, and `small` attributes are optional, and you can also set the `src` attribute dynamically.