Skip to content

spinningarrow/zoom-vanilla.js

 
 

Repository files navigation

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

Installation

  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>

    You can also import them if you're using webpack:

    import "zoom-vanilla.js/dist/zoom.css"
    import "zoom-vanilla.js/dist/zoom-vanilla.min.js"

Usage

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)

About

Medium's image zoom in vanilla JS (no jQuery).

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.9%
  • HTML 42.8%
  • CSS 3.3%
  • Nix 1.0%