Gzoom

See here for source - http://lab.gianiaz.com/jquery/gzoom/

by Jacques Surveyer

HTML

<script src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.core.min.js"></script>
<script src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.slider.min.js"></script>
<script src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.mousewheel.js"></script>
<script src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.gzoom.js"></script>
 <h1>jQuery gzoom plugin</h1>

<div id="zoom01" class="zoom">
    <img src="http://lab.gianiaz.com/jquery/gzoom/images/thumbs/toscana1.jpg" alt="colline toscane" title="Colline Toscane (SI) - Italy - 2007 &copy; Giovanni Battista Lenoci" />
</div>
<div id="zoom02" class="zoom zoom_no_lbox">
    <img src="http://lab.gianiaz.com/jquery/gzoom/images/thumbs/castellosseverina.jpg" alt="Castello S.Severina(KR)" title="Castello di S.Severina (KR) - Italy - 2008 &copy; Giovanni Battista Lenoci" />
</div>
<div id="zoom03" class="zoom zoom_no_lbox">
    <img src="http://lab.gianiaz.com/jquery/gzoom/images/thumbs/boirolo.jpg" alt="montagne valtellinesi" title="Vista delle montagne Valtellinesi da Boirolo (SO) - Italy - 2008 &copy; Giovanni Battista Lenoci" />
</div>
<div id="zoom04" class="zoom">
    <img src="http://lab.gianiaz.com/jquery/gzoom/images/thumbs/amsterdam.jpg" alt="amsterdam" title="Amsterdam - Holland - 2006 &copy; Giovanni Battista Lenoci" />
</div>
<br style="clear:both" />
<div id="instructions">

CSS

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...

JavaScript

$(function () {
     $zoom = $("#zoom01").gzoom({
         sW: 300,
         sH: 225,
         lW: 1400,
         lH: 1050,
         lighbox: false
     });
     $(".zoom_no_lbox").gzoom({
         sW: 300,
         sH: 225,
         lW: 1024,
         lH: 768,
         lightbox: true
     });
     $("#zoom04").gzoom({
         sW: 300,
         sH: 225,
         lW: 1024,
         lH: 768,
         lightbox: true,
         zoomIcon: 'images/gtk-zoom-in.png'
     });
 });