❤
npm
Sign UpSign In

zoom-vanilla.js

2.0.6 • Public • Published

zoom-vanilla.js npm version

                                                  _ _ _         _     
                                                 (_) | |       (_)    
  _______   ___  _ __ ___ ________   ____ _ _ __  _| | | __ _   _ ___ 
 |_  / _ \ / _ \| '_ ` _ \______\ \ / / _` | '_ \| | | |/ _` | | / __|
  / / (_) | (_) | | | | | |      \ V / (_| | | | | | | | (_| |_| \__ \
 /___\___/ \___/|_| |_| |_|       \_/ \__,_|_| |_|_|_|_|\__,_(_) |___/
                                                              _/ |    
                                                             |__/

Live demo: zoom-vanilla.js in action.

A simple library for image zooming; as seen on Medium. 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.

This is a fork of the jQuery plugin by fat. These are the key differences:

  1. No jQuery dependency; vanilla JavaScript only
  2. ~Equivalent~smaller file size (the minified version is slightly smaller due to better minification)
  3. Includes bug fixes not present in fat/zoom.js, which is no longer being maintained

Usage

  1. Download the JS and CSS files using any of the following methods:

  2. Add the zoom-vanilla.min.js and zoom.css files to your HTML page:

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

  3. Add a data-action="zoom" attribute to the images you want to make zoomable:

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

Browser support

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

Known issues

  • 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

Build

  • git clone the repo
  • npm i to install dev dependencies
  • npm start to start a simple HTTP server (makes it easy to view the demo page)
  • npm run build to build the minified JS and vendor-prefixed CSS
  • npm run watch to rebuild when any JS files change (recommended for development)

Readme

Keywords

Package Sidebar

Install

npm i zoom-vanilla.js

Repository

github.com/spinningarrow/zoom-vanilla.js

Homepage

github.com/spinningarrow/zoom-vanilla.js

Weekly Downloads

2,251

Version

2.0.6

License

MIT

Unpacked Size

17.1 kB

Total Files

7

Last publish

Collaborators

  • spinningarrow
Try on RunKit
Report malware