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.
Written in pure javascript for better performance, lightweight and simple. View demo.
Include
<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.
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 some attributes are necessary:
Initialize plugin
MediumLightbox('figure.zoom-effect');
MediumLightbox('figure.zoom-effect', {
margin:40
});