В сегодняшнем уроке я покажу Вам как с помощью jQuery можно сделать зум для Ваших картинок.
Данный плагин позволит рядом с обычной фотографией разместить небольшое окно, которое будет отображать увеличенную фотографию.
Для этого нам понадобится:
jQuery
В начале документа, между тегами <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>
В нем мы подключаем фреймворк, потом подключаем функцию самого зума и в конце задаем основные настройки. Объяснение настроек доступно в комментариях кода.
CSS
<link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />
Присоединяем таблицу стилей (также между тегами <head></head>). Здесь можно дать волю фантазии и экспериментировать.
HTML
HTML код для оформления фото выглядит следующим образом:
<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 мы прописываем путь к увеличенному фото.
На сегодня все! Удачи ;)