3 Demos of jQuery Zooming and Panning Images plug-in: EasyZoom

Introduction to EasyZoom plug-in

The EasyZoom plug-in is a light-weight and highly optimized plugin for zooming the images smoothly. The plug-in file size is only 4K and it has a few useful options that can be set by using the JavaScript.

The zooming is compatible with the mouse as well as touch devices. For the mouse, use the cursor for zooming and panning the images. For the smartphone, use the fingers for zooming the image.

You may give the view of the image as an overlay; so as the cursor is brought in, the image will zoom for the focused area. A separate container can also be used for displaying the larger view while you may also use thumbnails if you have a gallery of images to display with the zoom feature.

Keep reading for the setup instructions and demos with functional code in the coming sections.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

How to set up EasyZoom plug-in on your website?

The EasyZoom plug-in is compatible with jQuery 1.7+ versions. After downloading the plug-in, get the JS file from the “dist” folder and store it in your project location.

Refer the easyzoom.js file after the jQuery reference, for example:

<script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>

<script src=”js/jquery-easyzoom/easyzoom.js”></script>

Change the path as per your directory structure. The jQuery can be referenced from a CDN.

The markup may look like this:

 

So, it contains the reference to the image to be used for zooming and standard the image. The zoom image is placed in the anchor tag while standard the image in a simple <img> tag. The wrapper is a div tag with easyzoom class.

Initiate the plug-in via JavaScript

var $easyzoom = $(‘.easyzoom’).easyZoom();

A demo of overlay image with zooming feature

In this demo, the standalone image is used for illustrating the easyzoom plug-in. After opening the demo page by the link below, use the cursor in desktop or fingers in a mobile device for zooming the image:

jQuery zoom overlay

See online demo and code

The markup:

 

The JavaScript for initiating the plug-in:

 

A demo of zooming image with placeholder

In this demo, a placeholder for the zoomed image is used rather than an overlay. Just like above demo, bring the cursor over the image and focused area will display in the adjacent placeholder. Again, for smartphones, use the finger for focusing the image:

jQuery zoom adjacent

See online demo and code

The markup:

 

Get the complete code from the demo page.

A demo of zooming effect with thumbnail images

You may create thumbnails if you have a gallery of images. Upon clicking the thumbnail, the standard image is placed in the main placeholder. As you bring the mouse over or use the finger, the image zooms just like the first demo:

jQuery zoom thumbnails

See online demo and code

In the markup, you can see the data-standard attribute is used for the standard image while thumbnails are specified in the <img> tags. A sample is:

 

See the complete code in the demo page.

For more details about this cool plug-in; options, events, and methods, visit the developer’s page.