Skip to content
Medium's image zoom in vanilla JS (no jQuery).
JavaScript HTML CSS Nix
Branch: master
Clone or download
Pull request Compare This branch is 89 commits ahead, 24 commits behind fat:master.
spinningarrow Update issue template
Markdown formatting doesn't really help.
Latest commit 4d3c623 Apr 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
dist 2.0.6 Apr 14, 2018
img first commit Mar 28, 2014
js Fix unzoom not working properly in Edge Apr 12, 2018
.editorconfig
.envrc Nixify Apr 12, 2018
.gitignore Add .gitignore Feb 2, 2016
.npmignore Nixify Apr 12, 2018
.tern-project Enable TernJS Aug 27, 2016
ISSUE_TEMPLATE.md Update issue template Apr 30, 2018
LICENSE Update license Aug 27, 2016
README.md Make README a little clearer Oct 12, 2017
default.nix Nixify Apr 12, 2018
index.html Use autoprefixer for vendor prefixes in CSS Mar 19, 2017
package-lock.json 2.0.6 Apr 14, 2018
package.json Update package.json description for consistency Apr 14, 2018

README.md

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

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)
You can’t perform that action at this time.