Smooth Animated Lightbox Gallery In Pure JavaScript – MVT-Lightbox

Preview:

Description:

MVT-Lightbox is a pure JavaScript library for showcasing your images in a responsive, accessible gallery lightbox popup that uses CSS3 for smooth and fast animations.

See also:

• Top 10 JavaScript & CSS Gallery Lightbox Libraries

How to use it:

Load the required style sheet in the header of the html page.

<link rel="stylesheet" href="mvt-lightbox.min.css">

Load the mvt-lightbox.min.js right before the closing body tag.

<script src="js/mvt-lightbox.min.js"></script>

Add a list of thumbnails together with the lightbox containing larger images to the webpage as follows:

<section data-lightbox="mvt-lightbox">
  <ul class="mvt-thumbs-list">
      <li>
          <img src="1-thumb.jpg" alt="">
      </li>
      <li>
          <img src="2-thumb.jpg" alt="">
      </li>
      <li>
          <img src="3-thumb.jpg" alt="">
      </li>
      <li>
          <img src="4-thumb.jpg" alt="">
      </li>
      <li>
          <img src="5-thumb.jpg" alt="">
      </li>
      <li>
          <img src="6-thumb.jpg" alt="">
      </li>
  </ul>
  <div class="mvt-lightbox-overlay no-display"></div>
  <div class="mvt-lightbox" data-show-id="">
      <div class="mvt-img-list">
          <img src="1.jpg" alt="">
          <img src="2.jpg" alt="">
          <img src="3.jpg" alt="">
          <img src="4.jpg" alt="">
          <img src="5.jpg" alt="">
          <img src="6.jpg" alt="">
      </div>
      <div class="mvt-btn-close">
          <svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
              <title>Close</title>
              <path d="M27.344,4.287 L23.531,0.474 L14,10.005 L4.469,0.474 L0.656,4.287 L10.187,13.818 L0.656,23.349 L4.469,27.162 L14,17.631 L23.531,27.162 L27.344,23.349 L17.813,13.818 L27.344,4.287 Z"></path>
          </svg>
      </div>
      <div class="lightbox-nav-next">
          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
              <title>Next</title>
              <path d="M181.683 512.5L96.35 427.203l170.632-170.67L96.352 85.868 181.68.5 437.65 256.534 181.682 512.5z" />
          </svg>
      </div>
      <div class="lightbox-nav-prev">
          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
              <title>Previous</title>
              <path d="M85.683,512.5 L0.35,427.203 L170.982,256.533 L0.352,85.868 L85.68,0.5 L341.65,256.534 L85.682,512.5 L85.683,512.5 Z" transform="translate(171.000000, 256.500000) scale(-1, 1) translate(-171.000000, -256.500000) "/>
          </svg>
      </div>
  </div>
</section>

Initialize the gallery lightbox and done.

document.addEventListener('DOMContentLoaded', function() {
  mvt_lightbox(document.querySelector('[data-lightbox="mvt-lightbox"]'));
}, false);

Changelog:

07/03/2018

• Make lightbox keyboard accessible.

06/27/2017

• Replace velocity fade animation with CSS animation

06/01/2017

• Update velocity lib, clean up unused files. Remove mixin for css prefixes. Update js file using es6 let and const.