jqZoom позволяет изменять тип увеличения, высоту, ширину, расположение и многое другое.

Небольшой пример

Для начала подключим необходимые .js и .css файлы:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link href="jqzoom.css" type="text/css" rel="stylesheet" />

Используем следующую разметку:

<div id="content" style="margin-top: 100px; margin-left: 100px">
 <a class="jqzoom" title="kawasaki" href="kawasakigreen.jpg">
  <img title="kawasakigreen" style="border: #666 1px solid;" 
                                          src="kawasakigreen_small.jpg" /> 
 </a> 
</div>

В данном случае: kawasakigreen.jpg – исходное изображение, а kawasakigreen_small.jpg – уменьшенное. Класс jqzoom нам нужен для того, чтобы указать скрипту, с каким изображением работать. Для этого также можно использовать и идентификатор.

Теперь поставим выполнение скрипта на событие загрузки страницы:

$(document).ready(function(){
	$('.jqzoom).jqzoom();
});

Скрипт разработан Марко Рензи. Подробную документацию и примеры вы можете найти на сайте jqZoom

Посмотреть пример Cкачать архив