Minimal Image Gallery With Zoom On Hover - Zoomy-JS

Zoomy-JS is a jQuery plugin to dynamically render an image gallery with thumbnail previews from an array of images. Click on the thumbnails to switch between images.

It also provides a zoom on hover functionality that enables the user to zoom and pan images with mouse hover and cursor move.

How to use it:

1. Insert jQuery JavaScript library and the zoomy plugin's files into the HTML document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/zoomy.js"></script>
<link rel="stylesheet" href="dist/zoomy.css" />

2. Create a container to hold the image gallery.

<div id="myGallery"></div>

3. Define an array of images to be showcased in the image.

var urls = [
    '1.jpg',
    '2.jpg',
    '3.jpg'
];

4. Initialize the image gallery with default settings.

$('#myGallery').zoomy(urls);

5. Set the size of the image gallery. Default: auto.

$('#myGallery').zoomy(urls, {
  width: 600,
  height: 450
});

6. Place the thumbnails on the left or right side of the gallery. Default: bottom.

$('#myGallery').zoomy(urls, {
  thumbLeft:true,
  thumbRight:true
});

Changelog:

2019-09-04

• JS Update

---

This awesome jQuery plugin is developed by paxagency. For more Advanced Usages, please check the demo page or visit the official website.