github favorite twitter linkedin chevron-right

Medium Lightbox

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

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.

Use

Include

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

html

<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">
    </div>
</figure>
To do some calculations are necessary some attribute:
  • 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');

Option

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

Margin - default: 20 - Margin in px applied to the image in zoomed view.


Demo | (live in a new window)

Medium Lightbox Demo