Skip to content


Repository files navigation

Flickr's Justified Gallery


Flickr justified images gallery layout.

Table of Contents

WordPress Plugin

Visual Portfolio

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



Import fjGallery

Use one of the following examples to import fjGallery.


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 type="module">
  import fjGallery from "";


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>


<link href="" rel="stylesheet">
<script src=""></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 class="fj-gallery-item">
    <img src="<image_url_here>" alt="" width="200" height="200">

Run fjGallery

A. JavaScript way

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

B. jQuery way

  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


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 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.


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

For Developers


  • Run npm install in the command line


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


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