Neurotic Pumpkin Murderer

    flickr-justified-gallery

    2.1.2 • 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 + Skypack

    <script type="module">
      import fjGallery from "https://cdn.skypack.dev/flickr-justified-gallery@2.1?min";
    </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 + UNPKG

    <link href="https://unpkg.com/flickr-justified-gallery@2.1/dist/fjGallery.css" rel="stylesheet">
    <script src="https://unpkg.com/flickr-justified-gallery@2.1"></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.
    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 images 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

    Install

    npm i flickr-justified-gallery

    DownloadsWeekly Downloads

    436

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    548 kB

    Total Files

    21

    Last publish

    Collaborators

    • nk-o