The Zooming.js is a cross-browser compatible Javascript Image Zoom On Click plugin that allows you to quickly setup. It allow you to create the Image Zoom that makes sense.
The Javascript is still great fun and works well where CSS isn’t. Today We will make the Zoom Image effect on click by using jQuery and Javascript.
But have you tried the Zoom effect before? Like, maybe the Zoom effect using CSS Scale. How’s, was your experience? You may be surprised that there is the much lighter version available which allows you to implement an Image Zoom In Zoom Out On Clicking the image easily.
The solution we are talking about is javascript, but it’s just a 7kb file. This is something interesting for you because you don’t need to write much of code. You just need to add a small file, and you are almost done.
Over coding isn’t a good practice, and it’s a lot better to go with solutions that work and make sense of use it. Not only this but also have mobile-friendly, right?
Yes, it is built with mobile-first in mind and gives you smooth animations. The limitation still not end, it also offers intuitive gestures.
You may be thinking that we can easily do zoom by using CSS Zoom Property but what about the browser support? Yes, browser support is a major issue we ever had.
That’s why javascript works well where such a thing happens, and when we have something in javascript in little size code, then it makes more impressive.
How to Create Javascript Image Zoom On Click
A small file comes up with unlimited functions. How unlimited? The file is just 7kb, but it provides a lot of impressive features that look like an unlimited feature.
Let’s load the plugin Javascript file into your header to get started.
<script src="js/zooming.min.js"></script>After that, you need to create the HTML markup. We will simply define a div element with a class name value-img and then place an image inside it.
Moreover, we will define the data attribute for Zoom and the path to the original image.
<div class="value-img">
<img id="img-default" src="img/journey_start_thumbnail.jpg" data-action="zoom" data-original="img/journey_start.jpg"
alt="journey_start_thumbnail" />
</div>The last step to initialize the plugin and you can easily do by defining the Zooming function.
<script>
new Zooming().listen('img')
</script>That’s it.