В статье рассмотрена процедура установки плагина cloud-zoom на базе jQuery, а также описаны вспомогательные настройки плагина для оптимизации отображения увеличительного окна.

Довольно часто на ресурсах с большим запасом графического материала прибегают к применению приема лупы. К примеру, имеется изображение большого размера и разрешения. Чтобы оно поместилось в видимую зону экрана, его понадобится уменьшить, что ухудшит читабельность картинки, сложно будет рассмотреть детали. В этом случае поможет специальный плагин, который будет локально увеличивать определенные зоны картинки при наведении. Также такой прием очень часто используется в интернет-магазинах для того, чтобы потенциальный клиент мог хорошо в деталях изучить предлагаемый ему товар.

Стоит отметить, что в сети довольно много схожих программных пакетов, которые позволяют реализовать лупу для изображений. Поэтому логично выбрать из всего множества плагинов наиболее оптимальный вариант. Во время проведения своего анализа, я выбрал 3 основных критериев, по которым проводил отбор:

• поддержка разных браузеров;
• объем функциональных возможностей;
• объем плагина и скорость, с которой он работает.

Первый вариант, который идеально подошел к моим критериям, стал cloud-zoom. Эта статья будет посвящена установке и работе только этого скрипта, а последующие решения, которые тоже соответствуют поставленным критериям, будут рассмотрены в будущих статьях.

Установка

Итак, cloud-zoom. Автором этой разработки является некий профессор Туча, стоит уважить его труды и поблагодарит за этот продукт. В первую очередь хотелось бы отметить главное преимущество скрипта, в сравнении с другими — способность кода взаимодействовать с разными форматами галерей.

Первым этапом установки плагина станет скачивание последней jQuery, также непосредственно, файл самого плагина и таблица стилей к нему. Все это можно найти на официальном ресурсе продукта.

После того, как необходимые документы были скачены и размещены в соответствующей директории вашего ресурса, можно перейти к кодовой части установки. В теге head мы подключаем таблицу стилей для нашей лупы, а в само тело сайта вставляем тег script, который подключит программное обеспечение нашего плагина. Пример кода, который осуществляет вышеперечисленные задачи, приведен ниже

HTML

/*в head */
<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />
/*в body*/
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

Если вы все удачно подключили, то можно переходить к следующему этапу установки. Им станет вставка каркаса для корректной работы плагина, выглядеть это должно следующим образом

HTML

<a class="cloud-zoom" href="big-img.jpg">
    <img src="small-img.jpg"/>
</a>

Как вы можете заметить, ничего сверхъестественного в типовой конструкции HTML-тела плагина нет: ссылка на увеличенное изображение и сама картинка внутри нее. Также хочу отметить, что принципиально важно указать класс плагина, иначе скрипт не сработает. Если все было сделано правильно, то в браузере вы будете наблюдать примерно следующую картину

Как видно, окно лупы намертво прилипло к уменьшенной версии картинки. Этот недочет устраняется посредством специальных настроек, которые корректируют оформление и положение окна лупы. В данном примере рассмотрим, как можно поправить местоположение окна лупы

HTML

<a class="cloud-zoom" href="big-img.jpg" rel="adjustX: 20, adjustY: 0">
    <img src="small-img.jpg"/>
</a>

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

Настройки

Ниже приведен список всех возможных настроек плагина и краткое их описание

• zoomWidth — определяет размер ширины окна для вывода локального увеличения картинки. Если для этого параметра ничего не определено, то окно повторит значение ширины картинки.
• zoomHeight — определяет размер высоты окна для вывода локального увеличения картинки. Если для этого параметра ничего не определено, то окно повторит значение высоты картинки.
• position — переопределяет позицию расположения окна для вывода. Аналогично одноименному CSS-свойству, принимает значения "left", "right", "top" и "bottom". Позиция устанавливается относительно рассматриваемой картинки. Также можно определить вывод окна в необходимом контейнере через привязку к идентификатору. За это отвечает значение "blockId".
• adjustX — устанавливает положение окна лупы относительно оси координат абсцисс.
• adjustY — устанавливает положение окна лупы относительно оси координат ординат.
• tint — отвечает за цвет рамки, которая обрамляет окно вывода лупы. Не работает при использовании параметра softFocus.
• tintOpacity — определяет просвечиваемость границ курсора лупы.
• lensOpacity — определяет просвечиваемость границ окна вывода лупы.
• softFocus — придает эффект размытия той части картинки, которую не захватывает курсор лупы. Не работает при использовании параметра tint.
• smoothMove — позволяет настроить более плавное передвижение курсора лупы в зоне изучаемой картинки.
• showTitle — соответствует функциям обычного атрибута title.
• titleOpacity — позволяет контролировать прозрачность блока с описанием картинки.

В тоже время к настройкам можно отнести форматирование таблицы стилей. Ниже показан список всех селекторов таблицы, а также какой из них какому элементу лупы соответствует:

• .cloud-zoom-lens — курсор, который определяет локальную зону увеличения.
• .cloud-zoom-title — отвечает за стилизацию заголовка лупы.
• .cloud-zoom-big — окна для вывода увеличения картинки.
• .cloud-zoom-loading — оформление сообщения загрузки информации.

Работа в режиме галереи

В том случае, когда мы работаем с галереей, структура кода немного изменяется, и в то же время появляется несколько новых параметра настроек. Рассмотрим на живом примере

HTML

<a class="cloud-zoom" href="big-img.jpg" id='loupe1'
 rel="position: 'right', adjustX: 10, adjustY: 0">
	<img src="small-img.jpg" width="200" />
</a>
 
<ul>
	<li>
		<a class="cloud-zoom-gallery" href="big-img.jpg" title=''
 rel="useZoom: 'loupe1', smallImage: 'small-img.jpg'">
			<img src="small-img.jpg" width="100" />
		</a>
	</li>
	<li>
		<a class="cloud-zoom-gallery" href="masdefault.jpg" title=''
 rel="useZoom: 'loupe1', smallImage: 'small-img.jpg'">
			<img src="masdefault.jpg" width="100" height="114px" />
		</a>
	</li>
	<li>
		<a class="cloud-zoom-gallery" href="kostyum" title=''
 rel="useZoom: 'loupe1', smallImage: 'small-img.jpg'">
			<img src="kostyum.jpg" width="100" height="114px" />
		</a>
	</li>
</ul>

По внешнему виду напоминает обычную галерею, созданную посредством маркированного списка. Также уже узнаются элементы плагина cloud-zoom с указанием некоторых его настроек. В этом случае необходимо обратить внимание на команду useZoom, который привязывает каждый элемент галереи к основному блоку для просмотра. Связь образовывается за счет соответствия идентификаторов. Помимо этого добавилась еще один параметр — smallImage, он в свою очередь определяет, какое именно изображение показать в уменьшенном формате. Стоит отметить, что для режима галереи необходимо наличие трех картинок: 2 которые будут взаимодействовать с плагином, и еще одна в уменьшенном варианте для создания списка иконок.

На практике этот пример будет выглядеть так

jQuery('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Подводя итог

В завершении хочется отметить простоту использования плагина и гибкость при внесении корректировок в оформление данного функционального элемента. Помимо этого радует высокий показатель кроссбраузерности и маленький объем скрипта — всего 6 килобайт. Отдельного внимания заслуживает поддержка режима галереи. Единственное, что немного смущает, что все настройки вносятся непосредственно в HTML-документ, это немного засоряет наш код. Более практичнее было бы вынести их во внешний js-файл. Ну а в целом плагин достоин внимания и признания.