Javascript Image Zoom Gallery on Hover – Vanilla-Zoom.js

Category: | November 28, 2018
Author: ohmiler
Views Total: 0 Views
Official Page: Go to Website
Last Update: March 28, 2019 at 9:13 pm
License: MIT
Javascript Zoom gallery

Are you looking for Zoom solution which works with the gallery? This plugin is all about it. It’s a Javascript Zoom gallery which works when hovering the image.

The gallery comes with a thumbnail which 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 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 user able to view different parts of the selected image.

How to Add Photo Zooming Gallelry

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.

You May Also Like