Smooth Animated Lightbox Gallery In Pure JavaScript – MVT-Lightbox

Category: Gallery , Javascript , Modal & Popup | July 3, 2018
Author: mirelvt
Views Total: 2,717
Official Page: Go to website
Last Update: July 3, 2018
License: MIT

Preview:

Smooth Animated Lightbox Gallery In Pure JavaScript – MVT-Lightbox

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.

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.

You Might Be Interested In:

2 thoughts on “Smooth Animated Lightbox Gallery In Pure JavaScript – MVT-Lightbox

  1. setheaster

    Sorry if this is a stupid question, but for the life of me I cannot figure out where to put that last bit of code to initialize the lightbox?? Thanks

    Reply
  2. Madhav Paudel

    If there are more images on the page and if I click the last image of the page, the popop of images is in the top. So we have to scroll to top to see the last image. How to fix this error?

    Reply

Leave a Reply