MediumLightbox.JS – Elegant Image Zoom

MediumLightbox plugin is inspired by medium.com and reproduces exactly the same code to add this smooth transition over the image. Though, there is some improvement. The plugin is written in pure JavaScript which gives better performance and it is very lightweight.

It works on mobile devices (which Medium.com fails to do) and it is very simple, just like Fluidbox.

Here is how to use MediumLightbox.JS

Step 1

Include the plugin itself as well as the stylesheet. The styles included are only for demo purposes, so you can change it and remove the styles you do not need.

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

Step 2

<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:

• 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.

Step 3

<script>
MediumLightbox('figure.zoom-effect');
</script>

There is an option for the margin which is applied to the imaged in its zoomed view. By default, it is 20px but it can be adjusted by adjusting the code as below:

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

DOWNLOAD DEMO