Directions
Create an <img> tag, shrink the dimensions (for example, an 1200x1200 jpeg shrunk to 500x500), and initiate the javascript.
Example
<img src="img/sample.jpg" class="my_frame" width="500" height="500"> <script type="text/javascript"> $(function() { $('.my_frame').magnifyingFrame(); }); </script>
Default Settings
$('.my_frame').magnifyingFrame({ css_transitions : true, /* smooths motion and animates the zoom transition */ css_transition_speed : '0.1s', /* self-explanatory, probably won’t adjustment */ refresh_interval : 2, /* increase if you have CPU issues */ frame_shadow : 'inset 0px 0px 20px rgba(0,0,0,0.5)', /* creates an inset shadow while zooming */ mouseenter : function(), mouseleave : function() /* optional callback functions. use $(this.frame) to manipulate output */ });
Example with custom settings
<div id="my_custom_frame_wrapper"><img src="img/sample.jpg" class="my_custom_frame" width="300" height="300"></div> <script type="text/javascript"> $(function() { $('.my_custom_frame').magnifyingFrame({ frame_shadow : 'inset 5px 5px 30px rgba(0,0,0,1)', mouseenter : function() { $(this.frame).html('Say hello to my little dead friend.'); }, mouseleave : function() { $(this.frame).html(''); } }); }); </script> <style type="text/css"> #my_custom_frame_wrapper div.magnifyingFrame { display:table-cell; text-align:center; line-height:300px; font-size:18px; text-shadow:1px 1px 1px rgba(0,0,0,0.1), -1px -1px 1px rgba(0,0,0,0.2); color:#ddd; } #my_custom_frame_wrapper div.magnifyingFrame.magnifyingFrame_active { outline:1px solid red; } </style>