Image Zoom jQuery Demo

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less than 1.5kb.

Like this plugin and want to thank me? Buy me a coffee! To keep me going and improve this plugin.

View Repo Download Report Issue

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.

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.

Image with default zoom:

Example code:


					<img id="imageZoom" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoom').imageZoom();
						});
					</script>

Image with 200% zoom:


					<img id="imageZoomExtra" src="https://picsum.photos/1440/1080" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoomExtra').imageZoom({zoom : 200});
						});
					</script>

Image with 300% zoom:


					<img id="imageZoomExtraPlus" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoomExtraPlus').imageZoom({zoom : 300});
						});
					</script>

Multiple mages with same class:


					<img src="https://picsum.photos/1921/1081" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1922/1082" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1923/1083" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1924/1084" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<script>
						$(document).ready(function(){
							var zoomImages = $('.zoom-images');
							zoomImages.each(function() {
								$(this).imageZoom();
							});
						});
					</script>