В начале документа, между тегами <head></head> нам необходимо разместить следующий код:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
xzoom: 200, //ширина окна просмотра зума (200 по умолчанию)
yzoom: 200, //высота окна просмотра зума (200 по умолчанию)
offset: 10 //отступ от картинки (10 по умолчанию)
position: "right" //позиция окна зума ("right" - по умолчанию)
});
});
</script>
Присоединяем таблицу стилей (также между тегами <head></head>)
<link rel="stylesheet" href="css/jqzoom.css" type="text/css" media="screen" />
HTML код для оформления фото выглядит следующим образом:
<td width="174" height="174"><img src="images/shoe1_small.jpg" alt="images/shoe1_big.jpg" width="174" height="174" class="jqzoom"></td>
<td width="80"> </td>
<td width="174"><img src="images/shoe2_small.jpg" class="jqzoom" alt="images/shoe2_big.jpg"></td>
<td width="80"> </td>
<td width="174"><img src="images/shoe3_small.jpg" class="jqzoom" alt="images/shoe3_big.jpg"></td>
Или так:
<span class="tozoom"><img src="images/shoe1_small.jpg" alt="images/shoe1_big.jpg" class="jqzoom"></span>
<span class="tozoom"><img src="images/shoe2_small.jpg" class="jqzoom" alt="images/shoe2_big.jpg"></span>
<span class="tozoom"><img src="images/shoe3_small.jpg" class="jqzoom" alt="images/shoe3_big.jpg"></span></p>