Are you looking for a Zoom solution that works with the gallery? This plugin is all about it. It’s a Javascript Zoom Image gallery that works when hovering the image.
The gallery comes with a thumbnail that floated at the left side in a vertical way and the main photo will change when clicking on the thumbnail.
This vanilla Zoom plugin works like any kind of Image magnifier which Zoom out the specific part of the photo according to the cursor position.
Also, when the user hovers the main image, it will Zoom the image. It works with cursor position and users able to view different parts of the selected image.
How to Create Javascript Image Zoom Gallery
Make sure to add style.css and a javascript file in the head to make this plugin work. You will find both files in the download package.
<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css"> <script src="vanilla-zoom/vanilla-zoom.js"></script>
Next, You need to initial the javascript function by defining the ID.
<script>
vanillaZoom.init('#my-gallery');
vanillaZoom.init('#my-gallery2');
</script>The HTML is simple and all you need to define the ID that you initialize in the Javascript function. Also, we need to add the vanilla-zoom class which makes possible the Zoom function.
<div id="my-gallery" class="vanilla-zoom">
<div class="sidebar">
<img src="images/speaker-closeup.jpg" class="small-preview">
<img src="images/speaker-touch.jpg" class="small-preview">
<img src="images/speaker-lemons.jpg" class="small-preview">
</div>
<div class="zoomed-image"></div>
</div>The thumbnails are placed inside the sidebar div and each image needs to add a class small-preview. As for as main photos, we don’t need to add an image tag here, only need to define a div with class zoomed-image and it will automatically get the photo from the thumbnails.