setPhotoset

setPhotoset is a javascript function for beautifully resizing images in a photoset, without cropping or aspect-ratio distortion, such that all images in a row are of the same height.setPhotoset makes use of percentage widths and the css calc function, so that the photoset can work for all sizes, and can be resized without problem.

Installation

For node:

#using yarn
yarn add set-photoset

#using npm
npm install set-photoset --save

For the browser, download the zip file.

Basic Usage

The general format of setPhotoset is shown below:

setPhotoset(element,userOptions,grouping)

element refers to the element node, nodelist of elements, or CSS-selector string of the photosets you want to set.

userOptions is an optional object containing customizable options for the function (listed below).

grouping is an optional CSS-selector-friendly string meant to group photosets together in a class for similar styling. If not set, grouping will be randomly generated.

User Options

userOptions	type	default	description
layout	string OR [number]	null	defines layout of photoset (number of items per row. e.g "121" or [1,2,1]). If falsy, layout information is aquired from the attribute name defined by layoutAttribute if existing, or else nothing happens.
layoutAttribute	string	data-layout	attribute name from which layout information will be derived, if layout property of the userOptions is falsy.
immediate	boolean	false	boolean determining whether to immediately invoke function. If false, waits for all IMG children to load before executing layout application (no other childItem is supported). If true immediately applies layout, making use of height and width data provided in the attributes defined in childHeight and childWidth of childItems.
childItem	string	img	CSS-selector string that determines which children inside element is used to create grid. If set to something other than "img", immediate must be set to true and childHeight and childWidth be set appropriately.
childHeight	string	height	name of attribute on each childItem that lists item's height.
childWidth	string	width	name of attribute on each childItem that lists item's width.
callback	function	noop	function to execute after a photoset has been worked on. takes photoset DOM element as argument.
gutter	number OR string	0	value that sets spacing between items. If string, must be usable inside calc(). If a number, is set in px.
createSheet	boolean	true	boolean determining whether a stylesheet is to be created containing the styling required for layouting (if it doesn't yet exist). Set to false if you wish to supply your own stylesheet. See setphotoset-example.css for sample.

Examples

For examples, visit this demo page