{"id":38172,"date":"2019-10-04T18:19:07","date_gmt":"2019-10-04T10:19:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38172"},"modified":"2019-10-03T20:15:21","modified_gmt":"2019-10-03T12:15:21","slug":"jfmagnify-magnification-script","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jfmagnify-magnification-script\/","title":{"rendered":"Add Magnifying Effect on Your Web Page with jfMagnify"},"content":{"rendered":"

There are plenty of free zooming plugins<\/a><\/strong> that work incredibly well. However, most of these are built for images<\/strong> and they specify directions for image-only content<\/strong>.<\/p>\n

What if you could add a magnifying effect<\/strong> to every part of your web page? Thanks to jfMagnify<\/a><\/strong>, you can.<\/p>\n

It\u2019s a free jQuery plugin<\/strong> that supports not just image zooming, but also entire page zooming<\/strong>. It\u2019s one of the few plugins that also lets you choose the magnification level<\/strong> and supports touch events<\/strong> for mobile users<\/a>.<\/p>\n

\"jfMagnify<\/a><\/figure>\n

Read Also:<\/strong> How to Zoom Images like Medium<\/a><\/p>\n

Note this plugin can feel a little heavy because it relies on two dependencies<\/strong>: regular jQuery<\/strong> and jQuery UI<\/strong>. These are both necessary to get jfMagnify working properly. Not to mention the actual jfMagnify script<\/strong> you\u2019ll need to include on your page.<\/p>\n

The setup is a bit tricky because you can only target magnified elements within a container<\/strong>. If you want to target the entire page you\u2019ll need to include a class over your entire website<\/strong>.<\/p>\n

Here\u2019s how the single line of jQuery<\/strong> would look like:<\/p>\n

\r\n$(\".magnify\").jfMagnify();\r\n<\/pre>\n
This targets all elements inside the .magnify<\/code> container<\/strong> which is usually a div<\/code> element.<\/p>\n
These internal elements can be images, but could also include small print<\/strong>, for instance on site terms or privacy policy pages. All the documentation is available in the GitHub repo<\/a><\/strong>, so once you set it up, the whole process becomes a lot easier.<\/p>\n
Also, this plugin is very fickle and comes with a lot of container rules<\/strong>. For example, the container element cannot have a static CSS position<\/strong>, so it needs to either be relative, absolute, or fixed.<\/p>\n
You can find all default style rules<\/strong> 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.<\/p>\n
Take a peek at the docs on GitHub<\/a> to see what you think. And, you can also preview the interface<\/strong> on CodePen<\/a> if you wanna see the library in action before installing it.<\/p>\n
 See the Pen  jfMagnify Scale<\/a> by Jon Fahnestock (@fonstok<\/a>)\n  on CodePen<\/a>.<\/span><\/p>\n