Красивый плагин для увеличения Ваших фото

В сегодняшнем уроке я покажу Вам как с помощью jQuery можно сделать зум для Ваших картинок.

Данный плагин позволит рядом с обычной фотографией разместить небольшое окно, которое будет отображать увеличенную фотографию.

demosourse

Для этого нам понадобится:

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 мы прописываем путь к увеличенному фото.

На сегодня все! Удачи ;)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.visual-blast.com
Перевел: Максим Шкурупий
Урок создан: 23 Апреля 2009
Просмотров: 43813
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^