Nice and elegant way to add zooming functionality for images, inspired by
Clone or download
Latest commit b435048 Jul 12, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Initial commit Mar 7, 2015 Fix broken Markdown headings Apr 18, 2017
demo.html Initial commit Mar 7, 2015
medium-lightbox.js Remove console.log() Jul 12, 2017
style.css Fix chrome blurry image after zoom Jul 11, 2017


Nice and elegant way to add zooming functionality for images, inspired by

This plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.

Key features

Written in pure javascript for better performance, lightweight and simple. View demo.



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

Style.css has some extra style for demo purposes. Pick just what you need.


<figure class="half left zoom-effect">
    <div class="aspectRatioPlaceholder" >
        <div class="aspect-ratio-fill" style="padding-bottom: 50%;"></div>
        <img class="img" data-width="900" data-height="450" src="image.jpg">

To do some calculations some attributes are necessary:

  • data-width: the real width of the image.
  • data-height: the real height of the image.
  • To the div with aspect-ratio-fill class is applied a padding-bottom that is the aspect ratio of the image. The aspect ratio percentage is found with [(height/width)*100] formula.

Initialize plugin



MediumLightbox('figure.zoom-effect', {
  • Margin - default: 20 - Margin in px applied to the image in zoomed view.

Preview | Live demo

alt text