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>