Quick Reach
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:
|
1
2
3
4
5
6
7
8
9
|
<div class=“easyzoom”>
<a href=“img-directory/large-image.png”>
<img src=” img-directory/standard.png” alt=“The alternate text” />
</a>
</div>
|
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:
See online demo and code
The markup:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<h3>
A demo of easyzoom – Overlay
</h3>
<div class=“easyzoom easyzoom–overlay”>
<a href=“images/example-images/1_zoom.jpg”>
<img src=“images/example-images/1_standard.jpg” alt=“” width=“640” height=“360” />
</a>
</div>
|
The JavaScript for initiating the plug-in:
|
1
2
3
4
5
|
<script>
var $init_easyzoom = $(‘.easyzoom’).easyZoom();
</script>
|
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:
See online demo and code
The markup:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<h3>
A demo of easyzoom – Placeholder
</h3>
<div style=“float: right; width: 310px; height: 400px; background: #EEE;”></div>
<div class=“easyzoom easyzoom–adjacent”>
<a href=“images/example-images/2_zoom.jpg”>
<img src=“images/example-images/2_standard.jpg” alt=“” width=“310” height=“400” />
</a>
</div>
|
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:
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:
|
1
2
3
4
5
|
<li>
<a href=“images/example-images/3_zoom_3.jpg” data-standard=“images/example-images/3_standard_3.jpg”>
<img src=“images/example-images/3_thumbnail_3.jpg” alt=“” />
</a>
</li>
|
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.
Leave A Comment?