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.
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
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.