Flickr's justified images gallery
MIT License
Flickr justified images gallery layout.
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/
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>
<script type="module">
import fjGallery from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
</script>
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="https://cdn.jsdelivr.net/npm/[email protected]/dist/fjGallery.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fjGallery.min.js"></script>
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";
These styles required to set proper image position. Import style from /dist/fjGallery.css
.
<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>
fjGallery(document.querySelectorAll('.fj-gallery'), {
itemSelector: '.fj-gallery-item'
});
$('.fj-gallery').fjGallery({
itemSelector: '.fj-gallery-item'
});
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. |
// Javascript
fjGallery(document.querySelectorAll('.fj-gallery'), 'destroy');
// jQuery
$('.fj-gallery').fjGallery('destroy');
npm install
in the command linenpm run dev
to run build and start local server with files watchernpm run build
to run buildnpm run js-lint
to show eslint errorsnpm run js-lint-fix
to automatically fix some of the eslint errors