Responsive Justified Photo Gallery In JavaScript – flow-gallery

Category: Gallery , Javascript , Layout | October 14, 2019
Author: henningrck
Views Total: 44
Official Page: Go to website
Last Update: October 14, 2019
License: MIT

Preview:

Responsive Justified Photo Gallery In JavaScript – flow-gallery

Description:

flow-gallery is a vanilla JavaScript gallery/layout library to create a responsive justified photo gallery using CSS flexbox.

More features:

  •  Image caption bar on hover.
  • Supports responsive image delivery using <picture> element.

How to use it:

1. Install the package via NPM.

# NPM
$ npm install flow-gallery --save

2. Import the flow-gallery as an ES module.

import FlowGallery from 'flow-gallery';

3. Or load the compiled JavaScript in the document.

<script src="/dist/flow-gallery.min.js"></script>
<!-- or from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flow-gallery.min.js"></script>

4. Initialize the flow-gallery and we’re ready to go.

const flowGallery = new FlowGallery();

5. Add your images to a DIV container with the CSS class of ‘flow-gallery’. That’s it.

<div class="flow-gallery">
  <div><img src="1.jpg" /></div>
  <div><img src="2.jpg" /></div>
  <div><img src="3.jpg" /></div>
  ...
</div>

6. Add interactive captions to images.

<div class="flow-gallery">
  <div>
    <img src="1.jpg" />
    <div class="caption">Meow!</div>
  </div>
  <div>
    <img src="2.jpg" />
    <div class="caption">Meow!</div>
  </div>
  <div>
    <img src="3.jpg" />
    <div class="caption">Meow!</div>
  </div>
  ...
</div>

7. Load proper images depending on the screen size.

<div class="flow-gallery">
  <div>
    <picture>
      <source media="(min-width: 1000px)" srcset="1-1200x600.png" />
      <source media="(min-width: 800px)" srcset="1-1000x500.png" />
      <source media="(min-width: 600px)" srcset="1-800x400.png" />
      <img src="1.png" />
    </picture>
  </div>
  <div>
    <picture>
      <source media="(min-width: 1000px)" srcset="2-1200x600.png" />
      <source media="(min-width: 800px)" srcset="2-1000x500.png" />
      <source media="(min-width: 600px)" srcset="2-800x400.png" />
      <img src="2.png" />
    </picture>
  </div>
  <div>
    <picture>
      <source media="(min-width: 1000px)" srcset="3-1200x600.png" />
      <source media="(min-width: 800px)" srcset="3-1000x500.png" />
      <source media="(min-width: 600px)" srcset="3-800x400.png" />
      <img src="3.png" />
    </picture>
  </div>
  ...
</div>

8. Possible options to config the justified gallery.

const flowGallery = new FlowGallery({

      // default gallery selector
      selector: '.flow-gallery',

      // max height in pixels
      maxHeight: 400,

      // space between images
      gapWidth:10,

      // interprets the sizes as percentage
      percent: false,

      // whether to enlarge images to fill up the last row
      fillLastLine: false,

      // allows to enlarge images
      enlarge: false,

      // alighment
      align: 'left'
      
});

9. Update the gallery in case new images added to the gallery.

flowGallery.update();
flowGallery.fullUpdate();

Changelog:

v0.1.2 (10/14/2019)

  • Remove polyfills

v0.1.1 (10/13/2019)

  • Add compatibility for Internet Explorer 11
  • Fix wrapping bug in Firefox

You Might Be Interested In:


Leave a Reply