Medium-inspired Image Lightbox Library – MediumLightbox

Preview:

Description:

MediumLightbox is a pure JavaScript plugin that provides a Medium-like, mobile-friendly zoom effect on your images.

How to use it:

Embed the images into the document following the html structure as below. Note that you have to specify the real width/height of the image using ‘data-width’ and ‘data-height’ attributes instead.

<figure class="zoom-effect">
  <div class="aspectRatioPlaceholder" >
    <div class="aspect-ratio-fill" style="padding-bottom: 75.78947368421053%;"></div>
    <img class="img" data-width="475" data-height="360" src="img.jpg">
  </div>
</figure>

Load the main JavaScript file ‘medium-lightbox.js’ at the end of the document so the page loads faster.

<script src="medium-lightbox.js"></script>

The required CSS styles for the image lightbox when zooming.

.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}

.img {
  display: block;
  margin: auto;
  max-width: 100%;
}

.aspectRatioPlaceholder .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zoom-effect .img {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  backface-visibility: hidden;
}

.zoom-effect .zoomImg, .zoom-effect .zoomImg-wrap {
  position: relative;
  z-index: 900;
  transition: all 300ms;
}

.zoom-effect .zoomImg-wrap--absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zoom-effect .zoomImg {
  cursor: pointer;
  cursor: -webkit-zoom-out;
}

.zoom-effect .zoomOverlay.show { opacity: 1; }

.zoom-effect .zoomOverlay {
  z-index: 800;
  background: #fff;
  position: absolute;
  transition: opacity 300ms;
  opacity: 0;
  cursor: pointer;
  cursor: -webkit-zoom-out;
}

Initialize the MediumLightbox and done.

MediumLightbox('figure.zoom-effect');

Set the margin size of the zoomed view.

MediumLightbox('figure.zoom-effect',{
  margin: 50
});