Simplezoom

Add a simple and lightweight zoom functionality to images, videos or any other element.

Demo

Check out the demo

How to use

npm install simplezoom --save

Import or require the module

import Simplezoom from 'simplezoom';

or

var Simplezoom = require('simplezoom');

Initialize on an element

var myImage = document.querySelector('.my-image');
    
new Simplezoom(myImage);

Optionally add some options

var myImage = document.querySelector('.my-image');
    
new Simplezoom(myImage, {
    'delay': 500,
    'padding': 100
});

Available options

padding (Number)

default: 50 (in pixels)

openDelay (Number)

default: 0 (in milliseconds)

closeDelay (Number)

default: 0 (in milliseconds)

transitionDuration (Number)

default: 350 (in milliseconds)

closeOnScroll (Boolean)

close when scrolling

default: true

closeOnEscape (Boolean)

close with pressing the escape key

default: true

onOpen (Function)

callback function called when opening starts

onOpenComplete (Function)

callback functions called when opening is finished

onClose (Function)

callback function called when closing starts

onCloseComplete (Function)

callback functions called when closing is finished

API

Use the open() and close() methods to manually open and close Simplezoom