zoom-vanilla.js's Introduction

zoom-vanilla.js

A simple library for image zooming; as seen on Medium.

This is a fork of the jQuery plugin by fat. This version does not depend on jQuery or any third-party libraries and is of equivalent file size.

Live demo: https://spinningarrow.github.io/zoom-vanilla.js

It zooms in really smoothly, and zooms out when you click again, scroll away, or press the esc key.

If you hold the ⌘ or Ctrl key when clicking the image, it will open the image in a new tab instead of zooming it.

Usage

Download dist/zoom-vanilla.min.js and css/zoom.css from GitHub, or install via npm by running npm i zoom-vanilla.js.
Add the zoom-vanilla.min.js and zoom.css files to your HTML page:

<link href="css/zoom.css" rel="stylesheet"> <!-- inside <head> -->
<script src="dist/zoom-vanilla.min.js"></script> <!-- before </body> -->

<img src="img/blog_post_featured.png" data-action="zoom">

zoom-vanilla.js should (in theory) work in all modern browsers. If not, create an issue! Thanks!

The image is appended to the body; use an appropriate CSS selector for extra styling
Zooming may not be quite right if the aspect ratio of the image is changed

Clone this repository and run npm i before starting development.
To easily view the demo page, the project comes bundled with an HTTP server. Start it by executing npm start.
To build the minified JS, execute npm run build.
While developing, it gets annoying to keep executing npm run build every time a change is made. Instead execute npm run watch which will watch the zoom-vanilla.js file for changes and create the minified JS automatically.

Recommend Projects