Zoomy — лупа на jQuery
Дата публикации: 11.08.2011
Плагин 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>
Вывод
С практической точки зрения, плагин экономит место на сайте. А с эстетической — просто классно выглядит и может внести приятное разнообразие, например, при отображении увеличенных фотографий в каталоге.