Author: | davidecalignano |
---|---|
Views Total: | 2,144 views |
Official Page: | Go to website |
Last Update: | July 15, 2017 |
License: | MIT |
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 });