Cloud zoom

Cloud zoom Внедрять лупу в проекты приходится не так часто, как, к примеру, галереи или слайдеры, но, как оказалось в моем случае, в этой нише есть свои тонкости. Плагины для реализации лупы существуют в сети в достаточном количестве, поэтому задача подбора сводится к тому, чтоб выбрать, примерно, по таким критериям (в порядке важности):

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

Перебрав несколько разных плагинов, я остановился на cloud-zoom от профессора Тучи :). Решающим фактором стала возможность внедрения лупы в галерею. Но и некоторые другие реализации лупы мне приглянулись, их рассмотрим в следующих статьях.

Смотрим что умеет: демо

Проверено в:

  • IE 6-8
  • Firefox 3+
  • Opera 9+
  • Safari 3+
  • Chrome 7

Что качать?

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

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

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

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

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

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

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

Результат

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

Параметры

Название параметра Описание значение по умолчанию
zoomWidth ширина zoom-окна, при значении "auto" будет равна ширине окна с маленькой картинкой "auto"
zoomHeight высота zoom-окна, при значении "auto" будет равна высоте окна с маленькой картинкой "auto"
position определяет позицию zoom-окна по отношению к окну-родителю, может принимать значения "left", "right", "top" и "bottom", а также "blockId" — id блока, в случае, если нужно разместить zoom-окно в другой части экрана "right"
adjustX корректировка положения zoom-окна по горизонтали 0
adjustY корректировка положения zoom-окна по вертикали 0
tint цвет фона вокруг рамки родительского окна в hex-формате(#RRGGBB) (Не работает в паре с softFocus) false
tintOpacity прозрачность фона вокруг рамки-курсора в родительском окне 0.5
lensOpacity прозрачность рамки-курсора в родительском окне 0.5
softFocus эффект размытия области вокруг рамки-курсора (не работает в паре с tint) false
smoothMove сглаживание движения изображения в zoom-окне(значение 1 будет в точности повторять движение мыши по родительскому окну) 3
showTitle показывать описание (берется из атрибута title изображения) true
titleOpacity прозрачность фона с описанием 0.5

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

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

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

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

Результат

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

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

  • zoomImage — ссылка на масштабируемое изображение. По умолчанию, увеличивается то же самое изображение, что указано в img.
  • zoomSizeMode — определяет размер и пропорции окна масштабирования и объектива. При значении image — окно увеличения и пропорции объектива будут соответствовать уменьшенному изображению.
  • captionPosition — положение подписи, top (сверху) или bottom (снизу). По умолчанию — снизу.
  • zoomPosition — определяет положение окна увеличения. По умолчанию — 3 (справа-вверху). Всего же может быть 15 положений (соответственно указываемых цифрами от 0 до 15).
  • tintColor — цвет при наведении на картинку. По умолчанию — #FFFFFF (белый).
  • zoomOffsetX — Смещение окна масштабирования по горизонтали. По-умолчанию — 15.
  • zoomOffsetY — Смещение окна масштабирования по вертикали. По-умолчанию — 0.

    Напомню, это лишь несколько настроек. ознакомиться со всеми остальными настройками и их значениями — вы можете на официальной странице.

    fullweb.ucoz.ru

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

    Создайте папку 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

    Ниже приводится код 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

  • You May Also Like

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.