ADVANCED ZOOM
bower 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
Demo
http://heavybeard.github.io/advanced-zoom/dist/
How
1 - Link the advanced-zoom.js and advanced-zoom.css files to your site or application.
<!-- inside <head> --><!-- before </body> -->2 - Add a data-zoom="zoom" attribute to the images or the videos you want to make zoomable. For example:
<!--[if IE 9]><video style="display: none;"><![endif]--> <!--[if IE 9]></video><![endif]--> Why
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.
Where
advanced-zoom.js should (in theory) work in all modern browsers, in IE9 too. If not, create an issue! Thanks!
Who
This version by @heavybeard, forked originally from @spinningarrow.
Originally written by @fat