Увеличение картинки при навелении мышки. Плагин типа zoom

Плагин jQuery cloud-zoom v1.0.2 масштабирование изображений, но без открытия их (эффект увеличительного стекла). При наведении курсора мышки на картинку появляется область с картинкой, но в другом масштабе. У плагина есть 4 варианта реализации этого эффекта - смотрим демо

Увеличение картинки при навелении мышки. Плагин типа zoom

Вариант первый - наводим мышкой на картинку - справа появляется картинка в другом масштабе + миниатюры при нажатие на которые будет изменяться первое изображение.

<div class="zoom-section">    	  
<div class="zoom-small-image" style="float:left; margin-right:21px; border:4px #CCC solid;">
<a href='images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
<img src="images/smallimage.jpg" alt='' title="Optional title display">
</a>
</div>
<div class="zoom-desc">     
<p>
<a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' ">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage.jpg" alt = "Thumbnail 1"/>
</a>
<a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"/>
</a>                 
<a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' ">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"/>
</a>
</p>
</div>
</div>

Второй вариант - точно такой же за исключением подсветки первой картинки

<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage03.jpg' class = 'cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">
<img src="images/smallimage-3.jpg" title="Optional Title Text" alt=''/>
</a>
</div>
</div>

Третий вариант - область с картинкой в другом масштабе не открывается, а появляется на месте первой

<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage04.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
<img src="images/smallimage-4.jpg" title="Your caption here" alt=' '/>
</a>
</div>
</div>

Четвертый вариант - идентичен первому только блок в котором открывается большое изображение можно абсолютно позиционировать где-то на странице + небольшое размытие первой картинки для реализма

<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage01.jpg' class = 'cloud-zoom' title="Your caption here" rel="softFocus: true, position:'anypos', smoothMove:2">      
<img src="images/smallimage-1.jpg" alt='' />
</a>
</div>
<div class="zoom-desc" style="position:relative; width:248px;">
<div id="anypos" style="position:absolute;top:-428px; left: 428px;width:256px; height:256px;"></div>
</div>
</div>

И для каждого из вариантов подгружаем стили и JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

К изображениям можно так же добавить подпись. По сообщению разработчиков плагин работает во всех современных и не очень браузерах даже в IE6. Размер JS 6 кб не считая jQuery. Использование абсолютно бесплатно