jQuery для чайников | Эффект линзы | плагин JQzoom
Вот такую любопытную штуковину я нашел у веб разработчика из солнечной Италии Марко Рензи (Marco Renzi). Плагин называется jQzoom (версия 1.0.1 Evolution). С его помощью можно реализовать несколько вариаций весьма красивого и впечатляющего эффекта увеличительного стекла при наведении указателя мыши на картинку-превьюшку.
Для реализации эффекта понадобится сам плагин jQzoom, который можно бесплатно скачать на сайте автора здесь, и плюс до кучи библиотека jQuery в min варианте.
Кроме того, понадобятся две картинки одного и того же изображения: большая и маленькая. Маленькая будет работать превьюхой, а большая, соответственно, показывать голую задницу увеличенные фрагменты ее же рядышком.
Про подключение сторонних скриптов я уже рассказывал. На этот раз нам необходимо подключить сразу два файла:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom1.0.1.js" type="text/javascript"></script>
Как вы уже знаете, jQuery привязывается к классам или селекторам деталей веб-страницы. В нашем случае для работы понадобится всего лишь один класс, привязанный к ссылке, которая, в свою очередь, является чем-то вроде якоря.
Рассмотрим фрагмент кода страницы:
<a href="bigpicture.jpg" class="jqzoom">
<img src="smallpicture.jpg" alt="" />
</a>
Обратите внимание на адрес ссылки. Здесь используется просто имя большой картинки. Это говорит о том, что ссылка на самом деле не является таковой, а тэг <a href> используется лишь как удобная оболочка. «Текстом» же этой псевдо-ссылки является картинка превьюшки. Вот так вот ненавязчиво и оригинально.
Теперь о том, как работает эффект. Для начала приведем код скрипта, который необходимо добавить на страницу в пределах тэгов <head></head>:
<script type="text/javascript">
$(document).ready(function(){
$(function() {
var options = {
zoomWidth: 350,
zoomHeight: 280
};
$(".jqzoom").jqzoom(options);
});
});
</script>
Первая строка, как вы уже знаете, настраивает страницу на позитивный лад и говорит: «Ррработаем!» То есть, весь последующий код скрипта начнет выполняться сразу же после загрузки скелета страницы. За отображение же самого эффекта линзы отвечает строчка:
$(".jqzoom").jqzoom(options);
Как видите, все привязывается к обычному классу .jqzoom, который, в свою очередь, пристегнут к ссылке в показанном ранее коде страницы. Команда для срабатывания эффекта также называется .jqzoom
Над этой строкой есть парочка параметров для настройки отображения окна с фрагментами большой картинки. Здесь заданы ширина и высота окна. Их можно менять по своему усмотрению. Об остальных настройках можно почитать у автора плагина.
Теперь несколько слов о файле стилей для данного эффекта. Сложного тут ничего нет. Никаких специальных позиционирований ни для превью, ни для окна с фрагментами. Поэтому приведу лишь набор правил для отображения прицела, который показывает, какое конкретно место превьюхи в данный момент прорисовывается в качестве фрагмента:
.jqZoomPup {
overflow: hidden;
background-color: #fff;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity = 50);
z-index:10;
cursor: crosshair;
}
Класс .jqZoomPup используется самим плагином, поэтому переименовывать его не стоит. Привязан он там к небольшому блоку в виде квадратного окна. Понятное дело, что изначально (пока не навели мышь на превью) его не должно быть видно. Поэтому и overflow: hidden;
Далее сделали его полупрозрачным. Кто не помнит — три различных правила нужны для разных браузеров.
Кроме того, необходимо, чтобы прицел фланировал поверх всего и вся. Поэтому задали ему z-index позиционирование со значением 10 (с запасом, стало быть).
Ну, и напоследок, сам курсор пусть будет не пальцем, а таки крестиком.
Вот и все! Живой пример работы плагина JQzoom можно посмотреть здесь →
jQuery для чайников | Введение
jQuery для чайников | Начальные сведения | Простой слайдер
jQuery для чайников | Эффект линзы | плагин JQzoom
jQuery для чайников | Всплывающая подсказка | Плагин Tooltip
