Create Thumbnail Grid with Expanding Image Preview Using Gallerly.js

Preview:

Description:

Gallerly.js is a pure JavaScript photo gallery that lets you create a thumbnail grid with an expanding large image preview as you seen on Google Image Search.

How to use it:

Load the required stylesheet gallerly.css in the head section of the webpage.

<link rel="stylesheet" href="css/gallerly.css">

Create a thumbnail grid following the markup structure like so:

<div id="gallerly" class="container">
  <div class="image-viewer">
    <a class="thumbnail">
      <img src="images/1.jpg" data-title="Title" data-description="More Description"/>
    </a>
    <a class="thumbnail">
      <img src="images/2.jpg" data-title="Title" data-description="More Description"/>
    </a>
    <a class="thumbnail">
      <img src="images/3.jpg" data-title="Title" data-description="More Description"/>
    </a>
    <div class="preview hide">
      <div class="wrapper">
        <span class="arrow"></span>
        <a class="prev">&larr; Prev</a>
        <div class="preview-content">
          <img src="" />
          <div class="content">
            <h3 class="title"></h3>
            <span class="description"></span>
          </div>
        </div>
        <a class="next">Next &rarr;</a>
        <a class="close-preview">Close</a>
      </div>
  </div>
</div>

Load the gallerly.js at the bottom of the webpage.

<script src="js/gallerly.js"></script>

Initialize the thumbnail grid.

var $gallerly = document.querySelector("#gallerly");
var gallerly = new Gallerly($gallerly);