Пример
Скачать архив Для этого нам понадобится: jQuery В начале документа, между тегами <head></head> нам необходимо разместить следующий код:
Code <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> В нем мы подключаем фреймворк, потом подключаем функцию самого зума и в конце задаем основные настройки. Объяснение настроек доступно в комментариях кода. CSS
Code <link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" /> Присоединяем таблицу стилей (также между тегами <head></head>). Здесь можно дать волю фантазии и экспериментировать. HTML HTML код для оформления фото выглядит следующим образом:
Code <span class="tozoom"><img src="images/shoe1_small.jpg" class="jqzoom" alt="images/shoe1_big.jpg"></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> Как Вы видите, каждое фото мы заворачиваем в слой с классом "tozoom". Для каждого фото мы добавляем класс "jqzoom". И в атрибуте alt мы прописываем путь к увеличенному фото. Кому понравилось ставим +!
| 
