Zoomable Image Gallery In Vanilla JavaScript – vanilla-zoom.js

The Vanilla JS Image Zoom Plugin lets you create an image gallery where the users are able to view different parts of a selected image depending on the cursor position.

How to use it:

Import the stylesheet vanilla-zoom.css and JavaScript vanilla-zoom.js into the document.

<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css">
<script src="vanilla-zoom/vanilla-zoom.js"></script>

Insert the image previews to the gallery following the markup as follows. The users are able to change the selected image to be zoomed when clicking on the previews

<div id="my-gallery" class="vanilla-zoom">
  <div class="sidebar">
    <img src="1.jpg" class="small-preview">
    <img src="2.jpg" class="small-preview">
    <img src="3.jpg" class="small-preview">
  </div>
  <div class="zoomed-image"></div>
</div>

Initialize the gallery and activate the image zoom functionality.

vanillaZoom.init('#my-gallery');