Directory

← Back

sl-gallery

A web-component based hash-route photo gallery.

Author

Rating

Popularity

<100

Silverlinkz Photo Gallery

Build Status Published on npm Published on webcomponents.org

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)

npm install --save @silverlinkz/sl-gallery

Legacy Installation (Polymer 2 / Bower)

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

Usage

Import the gallery (Polymer 3):

import '@silverlinkz/sl-gallery';

Legacy import (Polymer 2 / Bower):

<link rel="import" href="bower_components/sl-gallery/sl-gallery.html">

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

<sl-gallery>
  <sl-gallery-image
      src="https://unsplash.it/800/500/?image=257"
      small="https://unsplash.it/400/250/?image=257"
      title="Example Title 01">
  </sl-gallery-image>
  <sl-gallery-image
      src="https://unsplash.it/800/500/?image=250"
      small="https://unsplash.it/400/250/?image=250"
      title="Another Title 02">
  </sl-gallery-image>
  <sl-gallery-image
      src="https://unsplash.it/800/500/?image=399"
      small="https://unsplash.it/400/250/?image=399"
      title="Photo Title 03"
      caption="Ipsa ut distinctio aperiam quia delectus, illum voluptates non.">
  </sl-gallery-image>
  <sl-gallery-image
      src="https://unsplash.it/800/500/?image=146"
      small="https://unsplash.it/400/250/?image=146"
      title="Photo Title 04"
      caption="Necessitatibus tempora ea eius placeat. Sed culpa numquam voluptatibus possimus, eaque vel!">
  </sl-gallery-image>
</sl-gallery>

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @jsilvermist/fullscreen-api#^0.2.0
  • @polymer/app-layout#^3.0.1
  • @polymer/iron-iconset-svg#^3.0.1
  • @polymer/iron-image#^3.0.1
  • @polymer/paper-icon-button#^3.0.1
  • @polymer/paper-spinner#^3.0.1
  • @polymer/polymer#^3.0.5
Released
2019-03-31
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

sl-gallery - Vaadin Add-on Directory

A web-component based hash-route photo gallery. sl-gallery - Vaadin Add-on Directory
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.
View on GitHub
View on NPM

sl-gallery version 2.0.2
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.18 * @polymer/app-route#^3.0.0-pre.18 * @polymer/iron-iconset-svg#^3.0.0-pre.18 * @polymer/iron-image#^3.0.0-pre.18 * @polymer/paper-icon-button#^3.0.0-pre.18 * @polymer/paper-spinner#^3.0.0-pre.18 * @polymer/polymer#^3.0.0

sl-gallery version 2.1.0
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.18 * @polymer/iron-iconset-svg#^3.0.0-pre.18 * @polymer/iron-image#^3.0.0-pre.18 * @polymer/paper-icon-button#^3.0.0-pre.18 * @polymer/paper-spinner#^3.0.0-pre.18 * @polymer/polymer#^3.0.0

sl-gallery version 2.1.1
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.19 * @polymer/iron-iconset-svg#^3.0.0-pre.19 * @polymer/iron-image#^3.0.0-pre.19 * @polymer/paper-icon-button#^3.0.0-pre.19 * @polymer/paper-spinner#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

sl-gallery version 2.1.2
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.19 * @polymer/iron-iconset-svg#^3.0.0-pre.19 * @polymer/iron-image#^3.0.0-pre.19 * @polymer/paper-icon-button#^3.0.0-pre.19 * @polymer/paper-spinner#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

sl-gallery version 2.2.0
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.19 * @polymer/iron-iconset-svg#^3.0.0-pre.19 * @polymer/iron-image#^3.0.0-pre.19 * @polymer/paper-icon-button#^3.0.0-pre.19 * @polymer/paper-spinner#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

sl-gallery version 2.3.0
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.19 * @polymer/iron-iconset-svg#^3.0.0-pre.19 * @polymer/iron-image#^3.0.0-pre.19 * @polymer/paper-icon-button#^3.0.0-pre.19 * @polymer/paper-spinner#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

sl-gallery version 2.3.1
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.0-pre.19 * @polymer/iron-iconset-svg#^3.0.0-pre.19 * @polymer/iron-image#^3.0.0-pre.19 * @polymer/paper-icon-button#^3.0.0-pre.19 * @polymer/paper-spinner#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

sl-gallery version 2.3.2
### Dependencies * @jsilvermist/fullscreen-api#^0.2.0 * @polymer/app-layout#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/iron-image#^3.0.1 * @polymer/paper-icon-button#^3.0.1 * @polymer/paper-spinner#^3.0.1 * @polymer/polymer#^3.0.5

Online