Lots of people are using Medium for their blogs. I really enjoy the functionality of the site so I figured I would try to implement some of their cool features. The one that really stuck out to me was the lightbox, modal, zoom effect that they have on some of their images. This isn’t the most complex thing in the world but I google searched just to see if someone else had a solution.
Lightbox / Modal / Zoom Effect Search
My search resulted in a few solutions and I decided to go with the most popular on GitHub, Medium’s Image Zoom for jQuery. You can view their demo here.
Simple Image Zoom Solution
This solution is extremely simple. You can follow the instruction on GitHub to see on how to install it. Currently, my site is built on Foundation, not Bootstrap. All that means, is that I just had to include Bootstraps transition.js file. If you are already using Bootstrap, you should be fine not to include it.
Include in your header:
- zoom.css
- zoom.js
- transition.js (for sites not using bootstrap.)
Once you have included the 2 or 3 files in your header, you simply add a data attribute to your images. My thought is that you would want to manually do this for your images as you may have images that you really don’t want zoomed in, such as a logo that you place into your blog post.
Resources:
Zoom.js GitHub: https://github.com/fat/zoom.js/
Zoom.js Demo: https://fat.github.io/zoom.js/
Transition.js by Bootstrap: https://raw.githubusercontent.com/twbs/bootstrap/master/js/transition.js
Photos: Property of Addison Legere.