HomeServiceContact
JavaScript
Open Source
min read
November 8, 2019
October 31, 2016

New Polymer Element for Balanced Photo Galleries - <polymer-bg>

New Polymer Element for Balanced Photo Galleries - <polymer-bg>
Table of contents

Balanced Gallery is a jQuery plugin that evenly distributes photos across rows or columns, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for responsive websites. On a recent project we needed a similar photo gallery for Polymer based frontend, hece we created and are open sourcing <polymer-bg> : a polymer element to evenly distribute the photos across rows or columns using balanced gallery plugin.

Demo - https://qed42.github.io/polymer-bg/

Github project -- https://github.com/qed42/polymer-bg ( Test, Use, Fork and let us know of your issues )

Using polymer-bg Element in your Project

Install this using bower


$ bower install polymer-bg --save-dev

Add the element element using html imports


<link rel="import" href="../polymer-bg.html">

Now you can use the tag, pass the images in the <img> tag and use the tag attributes to configure the settings as shown, exhaustive list of attributes below the example:


<polymer-bg bg-background="http://placekitten.com/335/283" ideal-width="300" bg-orientation="vertical">
   <img src="http://placekitten.com/335/283" />
   <img src="http://placekitten.com/325/596" />
   <img src="http://placekitten.com/580/365" />
   <img src="http://placekitten.com/282/581" />
   <img src="http://placekitten.com/503/319" />
   <img src="http://placekitten.com/549/577" />
   <img src="http://placekitten.com/355/493" />
   <img src="http://placekitten.com/500/150" />
   <img src="http://placekitten.com/360/529" />
   <img src="http://placekitten.com/589/361" />
   <img src="http://placekitten.com/452/462" />
   <img src="http://placekitten.com/550/304" />
   <img src="http://placekitten.com/352/204" />
   <img src="http://placekitten.com/400/220" />
</polymer-bg>
ballanced gallaries

Available attributes

  1. auto-resize - re-partition and resize the images when the window size changes
  2. bg-background - the css properties of the gallery's containing element
  3. ideal-height - only used for horizontal galleries, defaults to half the containing element's height
  4. ideal-width - only used for vertical galleries, defaults to 1/4 of the containing element's width
  5. maintain-order - keeps images in their original order, setting to 'false' can create a slightly better balance between rows
  6. bg-orientation - 'horizontal' galleries are made of rows and scroll vertically; 'vertical' galleries are made of columns and scroll horizontally
  7. bg-padding - Space in pixels between images
Written by
Artwork by
No art workers.
We'd love to talk about your business objectives