Simple Image Zoom & Pan with JS Zoomer jQuery Plugin

File Size: 7.48 KB
Views Total: 211
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Image Zoom & Pan with JS Zoomer jQuery Plugin

JS Zoomer is a lightweight, straightforward jQuery plugin for zooming and panning images within their parent container. Perfect for photo galleries, product showcases, or any scenario where image details are important.

This plugin allows users to explore images in greater detail by zooming in and out with clicks and the mouse wheel, and it provides a natural pan functionality by smoothly moving the image as the mouse hovers over it.

How to use it:

1. Include the JS Zoomer plugin files and the latest jQuery library in your HTML file.

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

2. Create a container element with the class 'zoomer-container' and add the image you want to zoom and pan inside it.

<div style="height: 500px; width:100%;" class="zoomer-container">
  <img alt="Image" src="image.webp">
</div>

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