Cloud zoom

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

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

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

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

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

Установка

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

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

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

HTML

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

HTML

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

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

HTML

Данная запись означает, что мы немного переопределили координаты вывода окна, относительно оси Х. также обратите внимание на то, что все настройки для плагина прописываются в атрибуте 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

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

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

Подводя итог

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

vaden-pro.ru

Ниже приводится код HTML простой страницы с одним экземпляром Cloud Zoom и галереей. Смотрите комментарии. Демонстрация кода в действии.

 <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <!-- Загружаем файл CSS для плагина Cloud Zoom --> <link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />  <!-- Библиотеку jQuery можно загружать из сети Google. --> <script type="text/javascript" src="js/jquery.min.js"></script>  <!-- Загружаем JavaScript файл плагина Cloud Zoom --> <script type="text/JavaScript" src="js/cloud-zoom.1.0.2.js"></script>  </head>  <body> 		  <!--	  Ссылка с классом 'cloud-zoom' должна содержать уменьшенную копию изображения.  Атрибут href должен указывать на большое изображение.  Опции задаются через атрибут rel ссылки в формате JavaScript но без скобок.  -->  	  <a href='img/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'  rel="adjustX: 10, adjustY:-4, softFocus:true">  <img src="img/smallimage.jpg" alt='' align="left" title="Текст заголовка" />  </a>        <p>Содержание старницы</p>   		 		<!--	  Можно создать галерею с помощью класса 'cloud-zoom-gallery'.  Атрибут href ссылки должен указывать на большое изображение.  В атрибуте rel нужно указать ID элемента для вывода большого изображения (useZoom: 'zoom1'),  и используемую уменьшенную копию (smallImage: img/....)  -->   		  <a href='img/bigimage00.jpg' class='cloud-zoom-gallery' title='Миниатюра 1'  	rel="useZoom: 'zoom1', smallImage: 'img/smallimage.jpg' ">  <img src="img/tinyimage.jpg" alt = "Миниатюра 1"/></a>    <a href='img/bigimage01.jpg' class='cloud-zoom-gallery' title='Миниатюра 2'  	rel="useZoom: 'zoom1', smallImage: ' img/smallimage-1.jpg'">  <img src="img/tinyimage-1.jpg" alt = "Миниатюра 2"/></a>     <a href='img/bigimage02.jpg' class='cloud-zoom-gallery' title='Миниатюра 3'  	rel="useZoom: 'zoom1', smallImage: 'img/smallimage-2.jpg' ">  <img src="img/tinyimage-2.jpg" alt = "Миниатюра 3"/></a>    </body> </html> 

ruseller.com

Перейдем к рассмотрению урока.

Создайте папку folder и поместите в нее файл index.html со следующим кодом:

После этого в папке folder создайте папку styles и поместите в нее файл cloud-zoom.css. Он должен содержать следующий код:

Теперь осталось подключить ява-скрипты. Для этого в папке folder создайте папку js и поместите в нее два файла jquery-1.4.2.js и cloud-zoom.1.0.2.min.js.

После выполнения всех вышеуказанных действий в окне Вашего браузера можно будет увидеть следующее:

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

В случае режима "Фотогалерея" существует выбор изображения из списка для просмотра в увеличенном виде.

У каждого режима есть свои особенности.

Например, для того чтобы задать режим "Фотогалерея", объекту необходимо обязательно присвоить класс "cloud-zoom-gallery" и передать следующие параметры rel : useZoom: ‘zoom1′, smallImage: ‘картинка.jpg’.

Аналогично для режима "Внутри":

режима "Размытие":

режима "Цвет":

Урок окончен. Всем спасибо за внимание.

webformyself.com

Cloud Zoom is a jQuery plugin comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content, or it can be separated in outer element.

Below is a simple example HTML page which creates a single Cloud Zoom instance and gallery facility. Please study the page as it contains useful comments and tips.

 <html> <head>  <!-- Load the Cloud Zoom CSS file --> <link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />  <!-- You can load the jQuery library from the Google Content Network. Probably better than from your own server. --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <!-- Load the Cloud Zoom JavaScript file --> <script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>  </head>  <body>    <!--	  An anchor with class of 'cloud-zoom' should surround the small image.  The anchor's href should point to the big zoom image.  Any options can be specified in the rel attribute of the anchor.  Options should be specified in regular JavaScript object format,  but without the braces.  -->  	            <!--	  You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.  The anchor's href should point to the big zoom image.  In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),  and also the small image to use (smallImage: /images/....)  -->                      </body> </html>  

Cloud Zoom uses a small amount of CSS as specified in the cloud-zoom.css file. The contents of this file are self-explanatory, and you can play about with the values for different effects.

Please note, in tint and soft-focus modes, the lens will always have a fully transparent center, regardless of any background colors applied.

You can see the plugin in action here and here

The code is taken from the plugin developer site….

www.codeforest.net

Что качать?

• jQuery последней версии
• cloud-zoom v1.0.2(в архиве сам плагин и css к нему)

Быстрый старт

Как обычно подключаем js и css:

html-конструкция:

Ничего особенного, кроме наличия класса cloud-zoom у ссылки. Результат

Лупа "под лупой"

Взглянув на результат быстрого старта стразу бросается в глаза, что zoom-окно "прилипло" к блоку с картинкой. Само собой, поскольку мы не использовали ни одного параметра плагина. исправим это:

Результат

Особенностью плагина является способ подачи параметров. Как видим из примера, параметры задаются через атрибут rel у ссылки-контейнера. Расмотрим возможные параметры:

Параметры

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

Режим галереи

Теперь рассмотрим вариант с галереей. Структура кода:

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

Результат

Для основного окна, вроде бы, все ясно, а вот для, так называемых, thumbnails мы видим два непонятных параметра: useZoom и smallImage. Все просто, useZoom указывает на id основного окна, а smallImage — путь к изображению, которое будет "зумиться". Само собой, для реализации такой галереи, каждое изображение должно быть в наличии в трех размерах: большое (в zoom-окне), среднее (в родительском) и маленькое (условно говоря, в качестве иконок в галерее)

Заметки

В моем случае, набор картинок в галерее мог меняться при помощи ajax, само собой, что действие плагина на подгруженные элементы не распространялось, поэтому стал вопрос переинициалзации плагина, это делается тоже просто:

Так же хочу заметить, что в коде плагина инициализация уже присутствует (в самом верху файла), поэтому если не нужно инициализировать плагин при загрузке — просто убираем эту строку.

Преимущества

• кроссбраузерность
• простота внедрения
• легкий вес — 6кб
• легкая настраиваемость
• поддержка режима галереи

Недостатки

Возможно до недостатка не дотягивает, но мне не нравится что параметры плагина приходится писать в HTML коде. Как по мне, то лучше, не "сорить" в хтмл, а все выносить во внешний js.

xiper.net

Плагин предназначенный для увеличения изображений вроде — Magic Zoom, коему он нисколько не уступает по функционалу: плавное увеличение, настройка мягкого\разнооттеночного фокуса, внутреннее увеличение зума. Подобное масштабирование изображений можно часто видеть на сайтах разных интернет-магазинов, где нужно более подробно рассмотреть уменьшенное изображение товара, поэтому рекомендуется использовать этот плагин только с изображениями большого формата. Несмотря на всю многофункциональность плагина, сам скрипт весит всего 6Кб, поэтому перегружать сайт не будет.

Плагин кроссбраузерный, проверен на работоспособность в IE6 +, Firefox, Chrome, Opera, Safari. Здесь представлена неофициальная версия, о чем будет напоминать надпись в левом нижнем углу изображений (в остальном она ничем не ограничена), чтоб ее убрать — придется купить лицензию (43$) на официальной странице разработчика.

Установка плагина

1. Скачайте архив. Создайте в корне файлового менеджера папку cloud-zoom, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлам скрипта, стилей и вставить код вызова плагина. Все это прописываем перед </body>:

3. И теперь чтоб применить функцию увеличения к необходимому изображению, просто добавляете к нему атрибут class=»cloudzoom», чтоб оно выглядело примерно так:

** Текст из title=»» будет выводиться в подпись масштабируемого изображения.

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

Если вы хотите что-то в работе скрипта изменить, нужно кроме атрибута class=»cloudzoom» — добавить еще один атрибут (data-cloudzoom=»настройки»), и в нем указывать нужные настройки. Например вот так:

** Настройки нужно перечислять через запятую.
** Настройки можно писать все в одну строку, или как я — переносить каждую на новую.
** Все значения, кроме числовых, true и false — нужно заключать в ‘кавычки‘.

Значении тех нескольких настроек, что я указал для примера: