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.
npm install boomzoom
// The simple approach:
boomzoom('.my-images')
.zoomOutOnBodyClick() // If an image is zoomed in, clicking on the body (around it) will zoom out
.margin(20); // Leave 20px margin around the zoomed in image
// The "don't touch my dom" approach:
var image = document.querySelector('.my-image');
image.style.transform = boomzoom.transposition(image, {margin: 20}).cssTransform;
// Zooming out:
image.style.transform = ''; // You don't need boomzoom for this
// The "What can this thing do" approach:
var image = document.querySelector('.my-image');
var zoomDimensions = boomzoom.transposition(image);
console.log(zoomDimensions);
If you added images that you now need to remove:
boomzoom.remove('.dont-zoom-me');
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.close();
You may not like instant speed zoom. To get smooth transitions, I suggest you add something like this to your css:
.my-images {
transition: transform .2s;
}