Vanilla JavaScript Library For Photo Gallery Lightbox – PhotoViewerJS

Preview:

Description:

PhotoViewerJS is a pure vanilla javascript library for displaying larger versions of thumbnails in a fullscreen, responsive gallery lightbox popup.

How to use it:

Load the PhotoViewerJS’ JavaScript and Stylesheet in your html page.

<link rel="stylesheet" href="css/photo.css">
<script src="js/photo.js"></script>

Add images into your webpage as follow.

<div id="PhotoGallery" class="photo-gallery">
  <figure class="photo-gallery--image">
    <a href="images/1.jpg" class="photo" title="Image 1 Description">
      <img src="images/1.jpg" alt="Image 1" title="Image 1 Description">
    </a>
  </figure>
  <figure class="photo-gallery--image">
    <a href="images/2.jpg" class="photo" title="Image 2 Description">
      <img src="images/2.jpg" alt="Image 2" title="Image 2 Description">
    </a>
  </figure>
  <figure class="photo-gallery--image">
    <a href="images/3.jpg" class="photo" title="Image 3 Description">
      <img src="images/3.jpg" alt="Image 3" title="Image 3 Description">
    </a>
  </figure>
  <figure class="photo-gallery--image">
    <a href="images/4.jpg" class="photo" title="Image 4 Description">
      <img src="images/4.jpg" alt="Image 4" title="Image 4 Description">
    </a>
  </figure>
  <figure class="photo-gallery--image">
    <a href="images/5.jpg" class="photo" title="Image 5 Description">
      <img src="images/5.jpg" alt="Image 5" title="Image 5 Description">
    </a>
  </figure>
</div>

Include the following html markups on pages you want the gallery to appear.

<div id="PhotoViewer" class="photo-viewer">
  <header class="photo-viewer--title">
    <h1 id="PhotoViewerTitle">Image Title</h1>
    <div id="PhotoViewerClose" class="photo-viewer--close"><a href="#">X</a></div>
  </header>
  <div class="photo-viewer--container">
    <figure class="photo-viewer--current-image" id="PhotoViewerCurrentImageContainer">
      <img id="PhotoViewerCurrentImage" src="">
    </figure>
  </div>
  <div class="photo-viewer--controls">
      <div id="PhotoViewerPreviousImage" class="photo-viewer--previous-image"><a href="#">&laquo; Previous</a></div>
      <div id="PhotoViewerCount" class="photo-viewer--count">1/10</div>
      <div id="PhotoViewerNextImage" class="photo-viewer--next-image"><a href="#">Next &raquo;</a></div>
    </div>
</div>