jfMagnify
jQuery plugin that creates a magnify glass effect. This plugin will magnify html content, not just images. It does this by cloneing an identified element and its children, scaling them to your specification, and then appending them to an identified container element.
Demos
See the Pen Magnify by Jon Fahnestock (@fonstok) on CodePen.
See the Pen Magnify Scale by Jon Fahnestock (@fonstok) on CodePen.
See the Pen Magnify Mag Zone by Jon Fahnestock (@fonstok) on CodePen.
Script Set Up
Just follow these steps to enable the magnify effect:
-
Include jQuery and jQuery UI on your page. Last tested with jQuery 3.3.1 and jQuery UI 1.12.1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-
Download and include jfMagnify after jQuery UI and before its first use.
<script src="jquery.jfMagnify.js"></script>
-
Init the plugin by attaching it to a direct parent of the element you want to magnify.
$(".magnify").jfMagnify();
Touch
Touch functionality has been tested with the addition of jQuery UI Touch Punch https://github.com/furf/jquery-ui-touch-punch/
HTML
This is the default setup in the HTML, but class names can be customized via arguments in the init function or a data attributes in the parent element.
- All of the elements should be parented into one element and the parent element should be the one attached to jfMagnify.
- The element being magnified and the magnify glass need to have the same grid context starting at the same top and left (0,0), so it's easier if they have the same direct parent.
<div class="magnify"> <div class="magnify_glass"></div> <div class = "element_to_magnify"> <img src="image/IMG_2209.jpg" draggable="false"/> </div> </div>CSS
I wanted the structure to be as adaptable as possible, so the default class names can be changed as arguments in the init function or data attributes in the opening of the parent element.
- The parent element cannot be statically positioned. It needs to be positioned: relative, absolute, or fixed.
- The magnifyGlass (default class name '.magnify_glass') element needs to be positioned absolute.
- The magnifiedZone (default class name '.magnify_glass') is where the magnified area will appear. This element needs to be positioned absolute with the the overflow set to hidden.
- The element being magnified and the magnify glass need to have the same grid context starting at (0,0) so the elementToMagnify should be positioned at top, left.
- With this plugin it's a good practice to use classes instead of id attributes because the magnified element and the element being magnified are cloned.
- The element being magnified and the magnified version of that element share a class (default class name '.element_to_magnify').
- This is so it and its children appear identical to their counterparts.
- If you need to select only the element being magnified you can add an id attribute to its opening. The plugin will remove the ID from the magnified version.
- If you need to select the magnified version of the element, it is given a unique class (default class name '.magnified_element') that can be selected.
.magnify { position: relative; width: 900px; height: 675px; } .magnify_glass { z-index: 100; position: absolute; overflow: hidden; } .element_to_magnify { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #elementBeingMagnified { } .magnified_element { }Defaults and Options
- center: Centers the magnified area in the magnified zone. The alternate is top, left. The default is true.
- scale: Scale can be changed. The default is 2x.
- containment: Defines the magnify glass's containment area. The default is set to be its direct parent.
- magnifyGlass: Defines the magnify glass element (the element you want draggable). The default is '.magnify_glass'.
- scaleGlass: This will scale the magnify glass in relation to the magnifiedZone's width and hight. This is helpful when creating an effect demonstrated in the magZone demo.
- magnifiedElement: Added class name to the cloned or magnified version of the element that has been magnified. This will allow you to select this element in css. The default is '.magnified_element'.
- magnifiedZone: Area where you want the magnified element to live. The default is set to '.magnify_glass'.
- elementToMagnify: Identifies the element you want to magnify. The default is '.element_to_magnify'.
Options as Arguments
Options can be passed as arguments through the init function.
$(".magnify").jfMagnify({ center: true, scale:2, scaleGlass:false, containment:'magnify', magnifyGlass : '.magnify_glass', magnifiedElement: '.magnified_element', magnifiedZone:'.magnify_glass', elementToMagnify : '.element_to_magnify', });Options as Data Attributes
Options can also be passed through data attributes in the opening of the parent element. Notice that the data attributes use dashes instead of camel case.
<div class="magnify" data-center = "true" data-scale ="2" data-containment =".magnify" data-magnify-glass = ".magnify_glass" data-scale-glass = false; data-magnified-element = ".magnified_element" data-magnified-zone =".magnify_glass" data-element-to-magnify = ".element_to_magnify" >Public functions
There are few public functions that can be called.
destroy(): This deactivates the plugin
$(".magnify").data("jfMagnify").destroy();scaleMe(number): This can be called to increase or decrease the scale of the magnified element.
var scaleNum = 2; $('.plus').click(function(){ scaleNum += .5; if (scaleNum >=3) { scaleNum = 3; }; $(".magnify").data("jfMagnify").scaleMe(scaleNum); });update(): This can be called to update the movement of the magnified element. This is handy if you need to update on non user movement like on animate.
$('.magnify_glass').animate({ 'top':'60%', 'left':'60%' },{ duration: 1200, progress: function(){ $(".magnify").data("jfMagnify").update(); }, ease: "easeInQuint" });Credits
I used http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ as a starting point for the plugin.
