flickr-justified-gallery

2.2.0 • Public • Published

Flickr's Justified Gallery

fjGallery.min.js

Flickr justified images gallery layout.

Online Demo

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.

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

Package Sidebar

Install

npm i flickr-justified-gallery

Weekly Downloads

380

Version

2.2.0

License

MIT

Unpacked Size

522 kB

Total Files

21

Last publish

Collaborators

  • nk-o