Add Magnifying Effect on Your Web Page with jfMagnify
There are plenty of free zooming plugins that work incredibly well. However, most of these are built for images and they specify directions for image-only content.
What if you could add a magnifying effect to every part of your web page? Thanks to jfMagnify, you can.
It’s a free jQuery plugin that supports not just image zooming, but also entire page zooming. It’s one of the few plugins that also lets you choose the magnification level and supports touch events for mobile users.
Read Also: How to Zoom Images like Medium
Note this plugin can feel a little heavy because it relies on two dependencies: regular jQuery and jQuery UI. These are both necessary to get jfMagnify working properly. Not to mention the actual jfMagnify script you’ll need to include on your page.
The setup is a bit tricky because you can only target magnified elements within a container. If you want to target the entire page you’ll need to include a class over your entire website.
Here’s how the single line of jQuery would look like:
$(".magnify").jfMagnify();
This targets all elements inside the .magnify container which is usually a div element.
These internal elements can be images, but could also include small print, for instance on site terms or privacy policy pages. All the documentation is available in the GitHub repo, so once you set it up, the whole process becomes a lot easier.
Also, this plugin is very fickle and comes with a lot of container rules. For example, the container element cannot have a static CSS position, so it needs to either be relative, absolute, or fixed.
You can find all default style rules in the GitHub repo but it might be a pain to customize if your layout is already built & running. The benefits of jfMagnify are, to me, worth the effort. Really, it depends on your needs and whether you like the interface.
Take a peek at the docs on GitHub to see what you think. And, you can also preview the interface on CodePen if you wanna see the library in action before installing it.
See the Pen jfMagnify Scale by Jon Fahnestock (@fonstok) on CodePen.