Responsive Justified Photo Gallery In JavaScript – flow-gallery

Preview:

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/flow-gallery@latest/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