Skip to content

willemvb/zoom.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ZOOM.JS

A pure JavaScript image zooming plugin with scrset support; as seen on Medium.com.

Has no jQuery or Bootstrap dependencies.

Has srcset support.

Original version by @fat: https://github.com/fat/zoom.js. This is a port of the npm version by @nishanths: https://github.com/nishanths/zoom.js.

https://htmlpreview.github.io/?https://github.com/willemvb/zoom.js/blob/master/index.html

Usage

You can use zoom.js directly as a script, or install via yarn.

Direct

  1. Link the zoom.js and zoom.css files to your site or application.
<link href="css/zoom.css" rel="stylesheet">
<script src="dist/zoom.js"></script>
  1. Add a data-action="zoom" attribute to the images you want to make zoomable. For example:
<img src="img/blog_post_featured.png" data-action="zoom">

Via yarn

  1. Install the package: yarn https://github.com/willmvb/zoom.js
  2. Link the zoom.css file to your application.
 <link href="css/zoom.css" rel="stylesheet">
  1. Import the package and call zoom.setup(elem) for each image you want to make zoomable.
import { zoom } from "@willemvb/zoom.js";

var imgElem = new Image();
imgElem.src = "tree.png";
document.body.appendChild(imgElem);

zoom.setup(imgElem);

Demo

https://htmlpreview.github.io/?https://github.com/willemvb/zoom.js/blob/master/index.html

First image has a standard src, second one uses srcset.

Notes

It has the same behavior and all the features from the original implementation. But:

* It has srcset support

License

Original license

This is a fork of the original zoom.js implementation by @fat. Copyrights for the original project are held by @fat and Nishanth Shanmugham.

Copyright (c) 2013 @fat The MIT License. Copyright © 2016 Nishanth Shanmugham.

About

Medium's Image Zoom with Srcset Support

Resources

License

Unknown, MIT licenses found

Licenses found

Unknown
LICENSE
MIT
MIT-LICENSE.txt

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.1%
  • HTML 36.2%
  • Makefile 6.5%
  • CSS 5.2%