Image thumbnails are great since they cut down load time and take up less space on the page. But they’re also harder to see, even on larger screens.
With JS magnification plugins you get the best of both worlds running image thumbnails with optional magnified pics. And for this post I’ve organized the absolute best JavaScript plugins for adding this effect to your page.
Whether you’re launching an eCommerce shop or just have a large thumbnail gallery on your site, one of these plugins should help you out.
1. Magnify JS
For a super lightweight hover-to-magnify effect check out Magnify JS.
This free plugin works on hover so the user doesn’t need to click anything. While hovering you’ll get a large magnifying bubble on top of the image which zooms into the picture, although it’s really just a higher-res version.
You can also add custom callbacks to enable/disable zoom features if you wanna give the user more control. And with Magnify JS you can even set the zoom level depending on the size of the magnification bubble. How cool!
It may not have all the features you need but this is a sturdy plugin and one of the lightest you’ll find online.
2. Blowup.js
Here’s another really cool magnifier called Blowup.js and this also works as a hover-to-zoom effect.
Blowup is a jQuery plugin so you do need the jQuery library to get this running. But you can call the function with just one line of JS making it super easy to run.
Take a peek at the GitHub page for more information along with a basic setup guide. Once you add the JS files just call the blowup() function along with optional parameters for width/height, drop shadow, cursor size and zoom scale.
No doubt one of my favorite plugins due to its many optional features and default behaviors.
3. jQuery Zoom
If you plan to stick with jQuery then you might also try jQuery Zoom. This plugin’s a bit smaller and comes with a very different interface.
When you add this into your page and target a thumbnail it’ll auto-zoom based on the thumbnail size. So rather than adding a monocle or circular zoom element, you’ll instead see the photo “up close” right inside the thumbnail container.
It can work with a click event or with a cursor hover, both can be setup in the exact same way.
Take a look at the demo page by Jack Moore to see how this works in action.
4. Leroy Zoom
Totaling less than 4KB is the Leroy Zoom plugin that might rouse a bit of attention for its size and behavior.
Take a peek at the demo page to see how this works in the browser. You’ll notice instead of adding the magnification circle on top of the image, this plugin lets you place it anywhere on the page.
You can have it follow the mouse or keep it in a fixed location beside the image.
And this plugin lets the user click to magnify even further giving them a deeper look at whatever image(s) you’re featuring.
5. Magnifier.js
Moving away from the jQuery ecosystem is Magnifier.js. This free vanilla JavaScript plugin also lets you add the zoom effect outside the main thumbnail pic.
One really unique feature is the zooming effect you can control through the mouse scroll wheel(or a laptop’s trackpad). While hovering the thumbnail you can scroll up & down to increase or decrease the zoomed area.
You can run this over singular images or an entire gallery of images. Really no wrong answers with this plugin and it’s super easy to work with.
6. Zoomple
Out of all the photo zoom plugins you can try I’d say Zoomple is one of the most unique.
It comes with a bunch of default display styles including circular & square elements along with delayed image loading.
It works best with a hover-to-zoom effect and it’s got a lot of custom settings to work from. You can find a huge list of these settings on the main GitHub repo along with values you can set in your code.
These let you define custom URLs for various images and even control the total load time. You can also choose the zoom window position, the default background, the zoom window CSS styles and whether to show or hide the cursor.
A great zooming plugin for almost any website at the fantastic price of free.
7. EasyZoom
Just as the name suggests, EasyZoom is an easy-to-use zooming plugin built on jQuery.
This plugin even works on touch devices like tablets and smartphones where most JS libraries don’t dare tread.
When hovering images you can choose how the zoom effect appears whether it’s in another window near the picture, or inside the thumbnail itself. This even works with galleries of images where you can change the default pic from a thumbnail gallery.
All of these examples should be easy to setup without too much effort. The main page has plenty of code samples along with a full list of options you can use for customization.
8. Zoom.js
I’ll admit Zoom.js is a bit different than other plugins. This one doesn’t create a monocle-style zooming feature or append some @3x hi-res image into the page.
Instead this works like a click-to-zoom image preview pane. This effect was popularized on Medium.com and has since grown into a great method for viewing images in portfolios, news sites, and blogs all over the web.
The Zoom.js plugin works on image thumbnails of all sizes and it should be real easy to setup.
9. magnifyMe
What I like about magnifyMe is the traditional way it approaches magnification. This plugin uses the classic glass-style effect with a circle and even custom CSS effects for realism.
If you check out the live demo you can see how this looks in your web browser. You won’t need much HTML or CSS to get this running, although it doesn’t have the cleanest codebase compared to some of the other jQuery plugins.
Still if you wanna dive into magnifyMe you can check out the documentation page for more info. It does run on jQuery and it should work in all modern browsers, but the setup just isn’t as clean as other options.
10. Mlens
At first glance you might not know what to think about Mlens. This free plugin offers a lot of functionality for such a small resource, not to mention there are so many options to customize right from the demo page.
What I like most is the realistic zooming effect. The default zoom value isn’t too high or low. It feels like you’re actually zooming into the image where you can see enough detail to glean some value, but not so zoomed that you’re staring at raw pixels.
But in the settings pane you can change all of these features including the zoom level and the magnifying circle size.
This thing is also fully responsive and should work on touchscreen devices too. An excellent choice for accessibility-conscious sites.
11. Zoomio
Defined as a simple mobile-friendly image zoom, I have to give credit to Zoomio for being a great yet lesser-known plugin.
It runs entirely on jQuery and lets you define a whole bunch of features for the interface. You can set the total zoom and what type of zoom feature to use(inside thumbnail, external block, magnifying circle etc).
The main demo is hosted on Dynamic Drive although the plugin itself still gets frequent updates in the codebase repo. Check out the GitHub page for more info and for a complete setup guide.
12. Smooth Products
Most image zoom features work best for ecommerce sites. And that’s exactly what Smooth Products was created for.
It’s a free jQuery plugin made for product thumbnail images where you can setup a clean hover-to-zoom feature without coding from scratch. The demo page offers an example of not just the zooming feature, but also the multi-image thumbnail slideshow which is also common for ecommerce sites.
All you need is the Smoothproducts CSS and JS files along with jQuery(optional) for the best effects. All the setup info on GitHub is pretty clear so anyone should be able to follow along.
The toughest part is getting a plugin like this working on a 3rd party platform like Shopify.
But if you’re diligent enough and know your way around basic frontend coding you should have no trouble getting this up & running.
Moving Forward
Out of this entire list I’d like to think there’s at least one plugin you can use. It doesn’t matter what type of image zooming functionality you need, they’re all accounted for and you can definitely find a great plugin free of charge.
Take another look over this list and see which JS scripts stand out. You can also browse through our recommended jQuery plugins to look for other features that might work well on your site.
