bower install advanced-zoom --savenpm install advanced-zoom --saveA simple library for image zooming; as seen on Medium.
This library is a fork of the original jQuery plugin by fat. This version does not depend on jQuery. Originally forked from zoom-vanilla.js
I added new feature for video and picture zooming that works like the image zooming.
Looking for demo and try all supports
http://heavybeard.github.io/advanced-zoom/dist/
1 - Link the advanced-zoom.js and advanced-zoom.css files to your site or application.
<link href="asset/css/advanced-zoom.min.css" rel="stylesheet"><!-- inside <head> -->
<script src="asset/js/advanced-zoom.min.js"></script><!-- before </body> -->2 - Add a data-zoom="zoom" attribute to the images or the videos you want to make zoomable. For example:
<img src="asset/img/forest.jpg" data-zoom="zoom"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="asset/img/city.webp" type="image/webp">
<!--[if IE 9]></video><![endif]-->
<img src="asset/img/city.jpg" data-zoom="zoom">
</picture><video data-zoom="zoom" width="320">
<source src="asset/video/storm.webm" type="video/webm">
<source src="asset/video/storm.ogv" type="video/ogv">
<source src="asset/video/storm.mp4" type="video/mp4">
</video>It's the best way to zoom an image or a video. It transitions/zooms in really smoothly, and then when you're done, scrolls away, [esc] keys away, clicks away… clean af.
If you hold your meta key (⌘ or Ctrl) it will open in a new tab.
If you add the new data property data-zoom-original="path/to/image" it will open a different image on the new tab, for example the full size image.
<img src="asset/img/city.jpg" data-zoom="zoom" data-zoom-original="asset/img/city.jpg">advanced-zoom.js should (in theory) work in all modern browsers, in IE9 too. If not, create an issue! Thanks!
This version by @heavybeard, forked originally from @spinningarrow.
Originally written by @fat