Small images are a great thing — they can reduce page load time and take up very little space on the page itself. On the other hand, they're hard to view on large screens. But thanks to JavaScript, you can create some pretty interesting things. Even more — you can create almost the entire page using only JS plugins , saving yourself from the need to write long and exhausting code.
JS plugins allow you to work with images just as well as CSS. Cropping, zooming, resizing, and more. Among these, cropping is the most complex function, since it requires pre-cropping, choosing the central area — not just randomly trimming the edges . As for resizing or zoom effects, JS is probably the best solution for such tasks.
Whether you're launching an online store or simply have a large thumbnail gallery on your site, one of the plugins below will definitely help you manage images. And with the holidays around the corner, let's casually explore a bunch of plugins for resizing and cropping images (part two).
Blowup
The excellent magnifier called blowup.js perfectly delivers a "zoom-on-hover" effect. Just move your cursor over an image, and the magnifier automatically enlarges the area under the pointer.
There’s just one “but” — this script is a jQuery plugin, so you’ll need the jQuery library to run it. That said, you can trigger the function with a single line of JS, making it very easy to use. Check out the plugin’s GitHub page for connection instructions, code examples, configuration, and more. After adding the JS file, just call the blowup() function with optional width/height parameters, shadow, cursor size, and zoom scale. You can configure the magnifier yourself or use default settings.
Leroy Zoom
Despite its small size (4KB), Leroy Zoom allows you to zoom images in two ways. On the demo page you’ll see that you can either move your cursor across the image, showing an enlarged portion next to it, or click the image to focus on a specific area within a set radius.
On the GitHub page you’ll find detailed instructions for use and configuration. And while the last update date may be a bit of a shock to some, the demo still works great in all major browsers (Chrome, Opera, Edge).
Magnifier
Unlike the previous plugins, Magnifier.js is a free vanilla JavaScript plugin that also enables zooming effects outside the main image thumbnail.
But the plugin has a truly unique feature — zoom control using the mouse scroll wheel (or laptop touchpad) . When you hover over the thumbnail, you can scroll up or down to zoom in or out. And the zoom level shown in the screenshots below isn’t even the max.
This plugin can be used in an image gallery or with individual images. The creator even suggested a great idea for a card-style layout (image + description), which looks quite nice. It’s easy to work with the plugin, and hard to mess up.
Zoomple
Among all zoom effect plugins, Zoomple is one of the most unique. It comes with many default styles, including circular and square elements, plus options for delayed image loading. You can try them all out on the demo page , which also shows solid browser compatibility.
Despite all the options, its best feature is the hover zoom effect, which offers a wide range of user settings. You’ll find the full list on GitHub , and they’re configured right in the function call.
In short, the settings let you define image URLs, control image loading time (e.g., show an image 10 seconds after page load), choose zoom window position, background, apply CSS styles to the zoom window, and show or hide the cursor. Very useful features.
Zoomple is a powerful zoom plugin suitable for almost any website — and best of all, it’s free.
EasyZoom
Another rich plugin — EasyZoom . As the name suggests, it’s easy to use and built on jQuery. What makes it special isn’t the zoom types, but its excellent support for touch devices like tablets and smartphones — where most JS libraries fail to even launch . Or simple finger taps don’t trigger zooming. But here, it works just fine.
Hovering over an image lets you choose how the zoom appears — in a popup or static window, or inside the thumbnail itself. The plugin even works with image galleries where the user picks a thumbnail to zoom in on details.
It’s simple and convenient to use and configure. There’s a GitHub page, but the main documentation and setup guide are on the demo page.
Zoom
A rather unique plugin, very different from its peers. Zoom.js doesn’t provide monocle-style zooming or enlarge the image by three times on the page.
Instead, it zooms the image inside its preview area when clicked — common in online stores to enlarge product photos. Zoom.js also works great for portfolios, news sites, and blogs.
This plugin requires no config, doesn’t care about original or thumbnail sizes, and is easy to use. More info is, as usual, on GitHub.
Mlens
At first glance, Mlens might leave you unsure what to think. But… this free plugin offers many features despite its tiny size, and lots of settings. You can even try different configurations live on the demo page to see what they do.
Some people prefer realistic zoom, others like a stronger effect. The default zoom value (1) is a happy medium — enough to show details without making pixels too visible. Try different values, but one might be just right.
This plugin is responsive and, like EasyZoom, works on mobile touch devices. There’s plenty of info on the usage page, though setup is simple.
Smooth Products
Most zoom functions are best suited for e-commerce sites. And that’s exactly what Smooth Products was made for.
This free jQuery plugin for product thumbnails lets developers implement standard “hover to zoom” effects without building from scratch. The demo page shows not just zooming, but image thumbnails, slideshows — all common in e-commerce. It’s a specialized plugin, not just generic.
All you need to know is that jQuery is optional. For cool effects, just understand the JS and CSS settings. As always, setup info is on GitHub and is clear enough for most devs.
The only tricky part is configuring it on third-party platforms (Shopify, Wix, Ukit, etc.). They have their own plugin sets, and replacing them isn’t always easy — but it is possible. Otherwise, this plugin is straightforward.
Zoomio
The Zoomio plugin is one of the easiest for mobile use among the lesser-known options. Really, tons of plugins are made and released, all doing basically the same thing — zooming. But what sets this one apart is its smooth transition effects. On the demo page, take your time and try all the styles — they’re quite beautiful.
Zoomio is fully jQuery-based and allows tons of fine-tuning for the final result. You can set overall zoom, choose the type of zoom (inside thumbnail, external block, magnifier circle, etc.).
Even though the demo is on dynamicdrive, there’s also a GitHub page with integration details. But the demo page is more detailed overall.
Conclusion
We’ve covered just a small portion of JS plugins for image zoom effects. Some may say they’re outdated, others will prefer different ones — and you’re all right. The point is: these plugins still work well in modern browsers, and it’s impossible to cover them all. We liked these ones, someone else may prefer that one over there . That’s great! Now you’ve got something to compare , and a toolkit of variations to experiment with.
We believe there’s at least one plugin in this list you’ll want to try. No matter what type of zoom you need, it's covered here — and it's free.
Just look through the list again and ask yourself: which JS plugin stands out the most? Explore the developer’s recommendations, features, and settings. Then your site will not only have zooming — it’ll look amazing doing it.
As for the cropping plugins we mentioned at the start — we’ll save those for the New Year. That’s where we’ll begin.