Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Лупа jQuery cloud-zoom

Дата:22.02.16 в 14:42
Раздел: 

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

Лупа jQuery cloud-zoom

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

Стоит отметить, что в сети довольно много схожих программных пакетов, которые позволяют реализовать лупу для изображений. Поэтому логично выбрать из всего множества плагинов наиболее оптимальный вариант. Во время проведения своего анализа, я выбрал 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 которые будут взаимодействовать с плагином, и еще одна в уменьшенном варианте для создания списка иконок.

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

Галерея

На заметку

Если для запуска галереи используется ajax, то плагин может не отработать. Чтобы исправить этот баг, необходимо прописать переинициализацию плагина. В стандартном виде это выглядит так

JavaScript

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

Подводя итог

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

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям: