← Back

iron-justified-gallery

Polymer element that shows a pretty formatted gallery (using the Flickr justified-layout library)

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/Collaborne/iron-justified-gallery on 2019-05-10 ]

iron-justified-gallery

Name: iron-justified-gallery
Availability: InStock
Author: Collaborne

Polymer element that shows a pretty formatted gallery (using the Flickr justified-layout library)

Install

npm install iron-justified-gallery --save

<iron-justified-gallery
  images="[[images]]"
  gallery-width="500"
  row-height="150">
</iron-justified-gallery>

Usage

Supported options:

Option	Description
images	Source of images that will be rendered in the gallery
galleryWidth	Width that the gallery will take
rowHeight	Height of a single row in the gallery

The images need to be a JavaScript array with absolute URLs:

const array = [
  { url: "http://www.server.com/image1.png", width: 500 },
  { url: "http://www.server.com/image2.png", width: 500 },
  { url: "http://www.server.com/image3.png", width: 500 }
];

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

polymer#Polymer/polymer#^2.0.0
iron-icon#PolymerElements/iron-icon#^2.0.0
iron-icons#PolymerElements/iron-icons#^2.0.0
iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.0.0
justified-layout#npm:justified-layout#^2.1.0

Released: 2018-08-28
Maturity: IMPORTED
License: Apache License 2.0

Compatibility

Framework: Polymer 2.0+; Polymer 1.0+ in 2.0.2
Browser: Browser Independent

iron-justified-gallery - Vaadin Add-on Directory

Polymer element that shows a pretty formatted gallery (using the Flickr justified-layout library)

**[ This description is mirrored from README.md at [github.com/Collaborne/iron-justified-gallery](https://github.com//Collaborne/iron-justified-gallery/blob/v2.3.1/README.md) on 2019-05-10 ]** # iron-justified-gallery [![Build Status](https://travis-ci.org/Collaborne/iron-justified-gallery.svg?branch=master)](https://travis-ci.org/Collaborne/iron-justified-gallery) [![Greenkeeper badge](https://badges.greenkeeper.io/Collaborne/iron-justified-gallery.svg)](https://greenkeeper.io/) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Collaborne/iron-justified-gallery) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/Collaborneiron-justified-gallery) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Collaborneiron-justified-gallery.svg)](https://vaadin.com/directory/component/Collaborneiron-justified-gallery) Polymer element that shows a pretty formatted gallery (using the Flickr justified-layout library) ## Install ~~~~ npm install iron-justified-gallery --save ~~~~ ```html ``` ## Usage Supported options: | Option | Description | | ----------------- | ------------------------------------------------------- | | **images** | Source of images that will be rendered in the gallery | | **galleryWidth** | Width that the gallery will take | | **rowHeight** | Height of a single row in the gallery | The images need to be a JavaScript array with absolute URLs: ```javascript const array = [ { url: "http://www.server.com/image1.png", width: 500 }, { url: "http://www.server.com/image2.png", width: 500 }, { url: "http://www.server.com/image3.png", width: 500 } ]; ```

GitHub Homepage
Issue tracker
View on GitHub

iron-justified-gallery version 0.0.1
### Dependencies Polymer/polymer#^1.0.0 * ./node_modules/justified-layout/dist/justified-layout.js

iron-justified-gallery version 0.0.2
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.1.0
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.1.1
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.2.0
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.2.1
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.3.0
### Dependencies * polymer#Polymer/polymer#^1.0.0

iron-justified-gallery version 0.3.1
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.3.2
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.0
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.1
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.2
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.3.3
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.3
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.4
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.5
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.6
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 0.4.7
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 1.0.0
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 2.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

iron-justified-gallery version 2.0.1
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 2.0.2
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.12 * iron-icons#PolymerElements/iron-icons#^1.2.0

iron-justified-gallery version 2.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

iron-justified-gallery version 2.1.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

iron-justified-gallery version 2.2.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

iron-justified-gallery version 2.3.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

iron-justified-gallery version 2.3.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-icon#PolymerElements/iron-icon#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.0.0 * justified-layout#npm:justified-layout#^2.1.0

Directory