Luce Digitale/JQ Sunny Magnifier – Basic

<!DOCTYPE html>
<html>
<!-- Luce Digitale/JQ Sunny Magnifier                                                          -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>Luce Digitale/JQ Sunny Magnifier  - Base</title>

<style type="text/css" media="screen">
/* sunnymagnifier container style START */
#sunnymagnifier {
 width: 400px; height: 400px; /* Image Container - width and height of the small image */ 
 margin:0 auto;
 border:3px solid #CECECE;
 background: url(css/images-gimme-code-2013-0043/img-big-800x800.jpg) repeat 0 0; /* The big image is the background image */
 background-position: 0px 0px; /* Chrome IE Firefox work well */ 
}
/* sunnymagnifier container style END */
</style>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script> 
 
<script> 
$(document).ready(function(){

    // Magnifier on mouse move START #########	
    $('#sunnymagnifier').mousemove(function(e){
	
	    // Hide the small image
		$("#smallImg").css({'opacity': 0})
	
		// Get mouse cursor position within element
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        // Debug Code for Cursor position - Hide if you do not need it
		$('#CursorPosition').html("Within element - X Axis : " + mouseX + " Y Axis : " + mouseY); 
		
       // Move the big image
	   var bigImgPosx = 0 - mouseX; 
	   var bigImgPosy = 0 - mouseY; 
	   // Firefox 24 does not support 'background-position-x' and 'background-position-y' so we have to split 'background-position' values by javascript
	   // Create the value for css 'background-position' as -> 0px 0px
	   var bigImgPos =  bigImgPosx +'px' + ' ' + bigImgPosy +'px'; 
	   $("#sunnymagnifier").css({'background-position': bigImgPos})
    });
	// Magnifier on mouse move END ###########

    // Stop Magnifier on mouse leave START ##########
    $("#sunnymagnifier").mouseleave(function(){
	  // Show the small image
	  $("#smallImg").css({'opacity': 1})
    });
    // Stop Magnifier on mouse leave END ############
  
});
</script> 
 
</head>
 
<body>
<p>Luce Digitale/JQ Sunny Magnifier</p>
<div id="CursorPosition">&nbsp;</div>

<div id="sunnymagnifier">
<img id="smallImg" src="css/images-gimme-code-2013-0043/img-small-400x400.jpg">
</div>
</body>
 
</html>
DEMO

 

My official WebSite >