sl-gallery - Vaadin Add-on Directory

Name: sl-gallery
Availability: InStock
Author: jsilvermist

A web-component based hash-route photo gallery.

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