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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

medium_lightbox

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


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:

  • 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.
Related post:  FlowType.JS - Web typography at its finest

Step 3


Initialize the lightbox plugin:

<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

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close