Zoomy — лупа на jQuery

Автор: Александр Головко Дата публикации:

Плагин Zoomy реализует красивый эффект наведения лупы над изображением. Все выполнено на высшем уровне — лупа выглядит «как живая».

Демо-пример.

Проверено в:

IE 6-8
Firefox 4
Opera 9.5-10
Safari 4
Chrome

Что качать?

библиотеку jquery качаем или подключаем из хранилища.
jquery.zoomy1.2.js(10.99 Kb) — плагин или его сжатая версия (4.49 Kb).
zoomy1.2.css(2.87 Kb) стили для лупы.

Быстрый старт

Подключаем библиотеки и таблицу стилей:

<link rel="stylesheet" href="css/zoomy1.2.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.zoomy1.2.min.js"></script>

HTML простой и интуитивно понятный — маленькая картинка, обернутая ссылкой на большую. Для удобства инициализации ссылке присвоим класс zoom.

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="" />
</a>

Инициализируем плагин:

<script type="text/javascript">
jQuery(function(){
	jQuery(".zoom").zoomy(); 
});
</script>

Вот собственно и все.

А теперь подробнее

При инициализации, можно передавать следующие параметры:

Параметры zoomy()

Название параметра	Описание	значение по умолчанию
zoomSize	Размер лупы	200
zoomText	Текст-подсказка.	'Click to Zoom'
round	Флаг, определяющий будет ли лупа круглой (true) или квадратной (false). Примечание: в IE6-8 не работает (лупа всегда будет квадратной).	true
glare	Флаг, определяющий будет ли у лупы эффект подсветки (true) или нет (false). Примечание: в IE6 не работает.	true
clickable	Устанавливается в true если нужно дополнительно обрабатывать клик на изображении (вне плагина)	false
attr	Устанавливает атрибут ссылки в котором ищем адрес увеличенного изображения.	'href'

События

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

Название события	Описание
click	Щелчок мышью
dblclick	Двойной щелчок мышью
mouseover	Движение мыши над объектом
mouseenter	Вхождение мыши на объект

Примеры инициализации с параметрами

Настраиваем лупу. Задаем размер, русифицируем надпись, изменяем атрибут с адресом большой картинки:

<script type="text/javascript">
jQuery(function(){
	jQuery('.zoom').zoomy({
        zoomSize: 150,
        zoomText: 'нажми для увеличения',
        round: true,
        glare: true,
        clickable: false,
        attr: 'rel'
    });                
});
</script>

Включаем лупу по mouseover:

<script type="text/javascript">
jQuery(function(){
	jQuery('.zoom').zoomy('mouseover',{
        zoomText: 'hover to zoom',
        clickable: true,
        attr: 'rel'
	});             
});
</script>

Вывод

С практической точки зрения, плагин экономит место на сайте. А с эстетической — просто классно выглядит и может внести приятное разнообразие, например, при отображении увеличенных фотографий в каталоге.

Материал

Zoomy Jquery Plugin

Xiper