Add Magnifying Effect on Your Web Page with jfMagnify

There are copiousness of free zooming plugins that work impossibly well. However, many of these are built for images and they discuss directions for image-only content.

What if we could add a magnifying effect to each partial of your web page? Thanks to jfMagnify, we can.

It’s a free jQuery plugin that supports not customarily picture zooming, though also entire page zooming. It’s one of a few plugins that also lets we choose a magnification level and supports hold events for mobile users.

jfMagnify plugin examplejfMagnify plugin example

Note this plugin can feel a tiny complicated since it relies on dual dependencies: regular jQuery and jQuery UI. These are both required to get jfMagnify operative properly. Not to discuss a actual jfMagnify script you’ll need to embody on your page.

The setup is a bit wily since we can customarily aim magnified elements within a container. If we wish to aim a whole page you’ll need to include a category over your whole website.

Here’s how a single line of jQuery would demeanour like:


This targets all elements inside a .magnify container that is customarily a div element.

These inner elements can be images, though could also include tiny print, for instance on site terms or remoteness routine pages. All a support is available in a GitHub repo, so once we set it up, a whole routine becomes a lot easier.

Also, this plugin is really variable and comes with a lot of enclosure rules. For example, a enclosure component cannot have a immobile CSS position, so it needs to possibly be relative, absolute, or fixed.

You can find all default character rules in a GitHub repo though it competence be a pain to customize if your blueprint is already built running. The advantages of jfMagnify are, to me, value a effort. Really, it depends on your needs and either we like a interface.

Take a look during a docs on GitHub to see what we think. And, we can also preview a interface on CodePen if we wanna see a library in movement before installing it.

Add Comment