Get new jQuery plugins just once a week

×

jfMagnify

FavoriteLoadingAdd to favorites

April 9, 2016

jfMagnify | jQuery plugin that creates a magnify glass effect

jfMagnify is a jQuery plugin that creates a magnify glass effect. It can also magnify html content

Created by Jon Fahnestock

Download

Example

jfMagnify jQuery plugin

zoom in

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.

Script Set Up

Just follow these steps to enable the magnify effect:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
  2. Download and include jfMagnify after jQuery UI and before its first use.

    <script src="jquery.jfMagnify.js"></script>
    
  3. 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

Options as Arguments

Options can be passed as arguments through the init function.

$(".magnify").jfMagnify({
    center: true,
    scale:2,
    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-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.

jfMagnify

Related posts:

Bonsai js
cake-chart
Valiant360
jfMagnify jQuery plugin

http://jquer.in/wp-content/uploads/2016/03/jfMagnify.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever