Image Zoom (jQuery) Plugin
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less than 1.5kb.
Looking for a React component version of this? Got you covered!
Like this Plugin? Want to say thank you?
Buy me a coffee! Too keep me going and improve this plugin.
Dependencies
How it works?
Allows users to click/tap to zoom-in on an image, pan around to inspect the details and click again to zoom-out.
Moving the focus out of the image will also reset the zoom.
Feel free to check this Demo to see it in action.
Why?
Why reinventing the wheel you may ask? I love to create and explore so why not sharing with others the things I create, hopefully will help a lot of younger developers.
How to use?
Just add the image-zoom.css to the head of your html file and the image-zoom.min.js just before the end of the body tag and after the jQuery script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your title</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/image-zoom.css">
</head>
<body>
<!-- Your HTML content here -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/image-zoom.js" type="text/javascript"></script>
</body>
</html>
You will not need to modify any existing html code as can be added to any existing images on your document, but alternatively add some images to your page:
<section id="main">
<div class="inner">
<h1>Image Zoom jQuery Demo</h1>
<div class="image-container">
<img id="imageZoom" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
</div>
</div>
</section>
Lets add the zoom to the images
Add a new script at the end of your html just before the end of the body tag and add the zoom to your images.
<script type="text/javascript">
$(document).ready(function(){
$('#imageZoom').imageZoom();
});
</script>
Options
You can pass the Zoom level as an option, by default this is set to 150%.
$('#imageZoom').imageZoom({zoom : 200});
Add to all images in a gallery
To add the zoom plugin to multiple images on a gallery you can use a standard loop to loop through the images and add the plugin to each of them.
The HTML:
<div class="my-gallery">
<img class="my-gallery-image" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
<p> </p>
<img class="my-gallery-image" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
<p> </p>
<img class="my-gallery-image" src="https://picsum.photos/1440/1080" alt="A image to apply the ImageZoom plugin">
</div>
And now the javascript:
$('.my-gallery-image').each(function(){
$(this).imageZoom();
});
3 Oct 8, 2020
3 Feb 23, 2022
3 Sep 3, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Oct 13, 2022
1.3k Jan 3, 2023
9 Nov 1, 2021
4 Jun 23, 2022
8 Oct 31, 2022
26 Dec 26, 2022
17 Dec 3, 2022
8 Nov 5, 2022
43 Oct 6, 2022
129 Nov 21, 2022
31 Dec 10, 2022
277 Dec 12, 2022
14 Dec 31, 2022