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

Category: Gallery , Javascript , Zoom | November 27, 2018
Views Total:1,847 views
Official Page:Go to website
Last Update:November 27, 2018


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 class="zoomed-image"></div>

Initialize the gallery and activate the image zoom functionality.


You Might Be Interested In:

Leave a Reply