Boom Zoom!
Simple image zooming.
Works both as a simple plug'n play thing on static html pages where messing with the dom is okay, and all the way to React components where you'd like full control.
transform
is used, which means you will have to be cautious if your images
for some reason already are transformed.
Install
npm install boomzoom
Usage (very subject to change)
// The simple approach: // If an image is zoomed in, clicking on the body (around it) will zoom out ; // Leave 20px margin around the zoomed in image
// The "don't touch my dom" approach:var image = document;imagestyletransform = boomzoomcssTransform; // Zooming out:imagestyletransform = ''; // You don't need boomzoom for this
// The "What can this thing do" approach:var image = document;var zoomDimensions = boomzoom;console;
Remove images
If you added images that you now need to remove:
boomzoom;
Remove all listeners
If you used the simple approach in a SPA of some sort, you may want to remove all listeners once you close down the page.
boomzoom;
Speed / Transition
You may not like instant speed zoom. To get smooth transitions, I suggest you add something like this to your css: