sl-gallery
A web-component based hash-route photo gallery.
Silverlinkz Photo 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)
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.
Links
Compatibility
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.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