Magnifying Glass for Images v1.1

from http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 via http://codepen.io/scott23/pen/akKqc * autoscale via SASS * tighten up JS * make repeatable Also a Codepen: http://codepen.io/zaus/pen/mEKwg

by chanaka1

HTML

<em class="instructions">Try changing the SASS <code>$dimension</code> value!</em>

<section>
<!-- Lets make a simple image magnifier -->
<div class="magnify">
    
    <!-- The "magnifying glass" which will contain the original/large version will go here via JS -->
    
    <!-- This is the "thumbnail" image, using the full-size original restricted to a viewport -->
    <img class="thumb" src="http://lorempixel.com/640/640/city/4"/> <!-- http://thecodeplayer.com/uploads/media/iphone.jpg -->
    
</div>

<!-- and another one -->
<div class="magnify">
    <img class="thumb" src="http://lorempixel.com/640/640/city/3"/>
</div>
</section>

SCSS

.magnify {
    $dimension: 300px;
  
    width: $dimension;
    position: relative;
    cursor: none;
    
    border:2px solid black;
    margin: $dimension/8;
    display:inline-block;
  
  /* magnifying glass overlay */
  .glass {
    z-index:9000; /* always on top? */
    width: $dimension*7/8; height: $dimension*7/8;
    position: absolute;
    border-radius: 100%;
    background-repeat:no-repeat;
    background-color:white;
    
    /* Multiple box shadows to achieve the glass effect*/
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    
    /*hide the glass by default*/
    display: none;
  }
  
  /*To solve overlap bug at the edges during magnification*/
  .thumb {
      display: block; width:$dimension;
    }
}

JavaScript

// scope protection
;var Magnifier = (function($){
var LIB = {
    /* standard selection */
    selectors : {
        magnify : '.magnify'
        , glass_class : 'glass' // lame
        , glass : '.glass'
        , thumb : '.thumb'
        , active_class : 'active'
    }
    ,
    /* remember dom elements */
    $el : { }
    ,
    /* prepare all stuff */
    init : function(){
        // get dom elements
        LIB.$el.magnifiers = $(LIB.selectors.magnify);
        
        //add glass to each magnifier
        var $glass = $('<div></div>').addClass(LIB.selectors.glass_class);
        
        // get the native image size of each magnifier source image
        LIB.$el.magnifiers.each(function(i,o){
            var $magnifier = $(o)
                , $thumb = $magnifier.find(LIB.selectors.thumb)
                ;
            
            // use Image object to get the dimensions
            var image_object = new Image();
            image_object.src = $thumb.attr("src");
            
            // save for later
            $magnifier.data({"native_w":image_object.width, "native_h":image_object.height});

            // attach behaviors
            $magnifier
                .mousemove(LIB.behaviors.mousemove)
                ;
            
            // add glass
            $thumb.before( $glass.clone().css('background-image', 'url(' + $thumb.attr('src') + ')') );
        });
        
    }//--        fn        init
    ,
    behaviors : {
        /* delay for...fade */
        fadeDelay : 300
        ,
        /* fade in/out glass overlay if mouse is outside container */
        isHover : function(cw, ch, mx, my){
            return (mx < cw && my < ch && mx > 0 && my > 0);
        }//--        fn hover
        ,
        /* move glass overlay */
        mousemove : function(e){
            var $magnifier = $(this)
                , offset = $magnifier.offset() // relative position
                , mx = e.pageX - offset.left // relative to mouse
         ...