Flickr's Justified Gallery

Flickr justified images gallery layout.

Online Demo

Table of Contents

• WordPress Plugin
• Import fjGallery
  • ESM
  • ESM CDN
  • UMD
  • UMD CDN
  • CJS (Bundlers like Webpack)
• Add Styles
• Prepare HTML
• Run fjGallery
  • A. JavaScript way
  • B. jQuery way
• Options
• Events
• Methods
  • Call methods example
• For Developers

WordPress Plugin

We made WordPress plugin to easily create image galleries and portfolios in your blog with masonry, tiles and Flickr's Justified Gallery layouts.

Demo: https://visualportfolio.co/

Download: https://wordpress.org/plugins/visual-portfolio/

Import fjGallery

Use one of the following examples to import fjGallery.

ESM

We provide a version of fjGallery built as ESM (fjGallery.esm.js and fjGallery.esm.min.js) which allows you to use fjGallery as a module in your browser, if your targeted browsers support it.

<script type="module">
  import fjGallery from "fjGallery.esm.min.js";
</script>

ESM CDN

<script type="module">
  import fjGallery from "https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2.1/+esm";
</script>

UMD

fjGallery may be also used in a traditional way by including script in HTML and using library by accessing window.fjGallery.

<link href="fjGallery.css" rel="stylesheet">
<script src="fjGallery.min.js"></script>

UMD CDN

<link href="https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2.1/dist/fjGallery.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2.1/dist/fjGallery.min.js"></script>

CJS (Bundlers like Webpack)

Install fjGallery as a Node.js module using npm

npm install flickr-justified-gallery

Import fjGallery by adding this line to your app's entry point (usually index.js or app.js):

import fjGallery from "flickr-justified-gallery";

Add Styles

These styles required to set proper image position. Import style from /dist/fjGallery.css.

Prepare HTML

<div class="fj-gallery">
  <div class="fj-gallery-item">
    <img src="<image_url_here>" alt="" width="200" height="200">
  </div>
  <div class="fj-gallery-item">
    <img src="<image_url_here>" alt="" width="200" height="200">
  </div>
  ...
</div>

Run fjGallery

A. JavaScript way

fjGallery(document.querySelectorAll('.fj-gallery'), {
  itemSelector: '.fj-gallery-item'
});

B. jQuery way

$('.fj-gallery').fjGallery({
  itemSelector: '.fj-gallery-item'
});

No conflict (only if you use jQuery)

Sometimes to prevent existing namespace collisions you may call .noConflict on the script to revert the value of.

const fjGalleryPlugin = $.fn.fjGallery.noConflict() // return $.fn.fjGallery to previously assigned value
$.fn.newFjGallery = fjGalleryPlugin // give $().newFjGallery the fjGallery functionality

Options

Name	Type	Default	Description
itemSelector	string	.fj-gallery-item	Items selector.
imageSelector	string	img	Image selector, will find in itemSelector.
gutter	int/object	10	Gutter between items, supports object like { horizontal: 10, vertical: 10 }.
rowHeight	int	320	Rows height.
rowHeightTolerance	float	0.25	How far row heights can stray from rowHeight. 0 would force rows to be the rowHeight exactly and would likely make it impossible to justify. The value must be between 0 and 1.
maxRowsCount	int	Number.POSITIVE_INFINITY	Limits the number of rows to show at this number regardless of how many items still need to be laid out.
edgeCaseMinRowHeight	float	0.5	Sets the minimum height for each row in a layout, based on the targetRowHeight
edgeCaseMaxRowHeight	float	2.5	Sets the maximum height for each row in a layout, based on the targetRowHeight
lastRow	string	left	Last row align. Available values: left, center, right, hide.
transitionDuration	string	bool	0.3s
calculateItemsHeight	bool	false	Calculate items height in order to support image captions and other content, so rows can be displayed properly.
resizeDebounce	int	100	Window resize debounce timeout in ms.

Events

Events used the same way as Options.

Name	Description
onInit	Called after init end.
onDestroy	Called after destroy.
onAppendImages	Called after appended new images (available 1 argument with images array).
onBeforeJustify	Called before justification algorythm start working.
onJustify	Called after images justified.

Methods

Name	Result	Description
resize	-	Justify images and container. Called on window resize and load.
appendImages	-	Called after you appended new items in the gallery container, required 1 argument with new items array.
updateOptions	-	Update current gallery options and recalculate it, required 1 argument with new options.
destroy	-	Destroy fjGallery and set block as it was before plugin init.

Call methods example

// Javascript
fjGallery(document.querySelectorAll('.fj-gallery'), 'destroy');

// jQuery
$('.fj-gallery').fjGallery('destroy');

For Developers

Installation

• Run npm install in the command line

Building

• npm run dev to run build and start local server with files watcher
• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors