Minimal Image Gallery With Zoom On Hover - Zoomy-JS

File Size: 6.46 KB
Views Total: 13999
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 = [

4. Initialize the image gallery with default settings.


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, {



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