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