Xiper

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

По теме