CLOUD ZOOM - эффектное увеличение изображений или товара на jQuery

Апрель, 26th 2014
Рубрика: Web-мастеринг
Подписаться на комментарии по RSS

Cloud Zoom

Cloud Zoom - качественный и легкий jQuery-скрипт позволяющий масштабировать изображения. Хорошо подходит для детально показа товара в интернет-магазине, где весьма популярен.

К примеру, он используется на сайте интернет-магазина Еldorado, в чем легко убедиться если заглянете в код странички, собственно там же можно посмотреть работу скрипта в действии. Cloud Zoom имеет довольно много настроек, совместим со всеми современными браузерами и даже древним IE6 (сам не проверял), кроме того весит скрипт всего навсего 7Kb.

С сайта на сайт кочует практически одно и то же описание (долбаные копипастеры) этого чудесного скрипта и ссылка на скачивание версии V1.02, в то время как на github давно лежит версия Cloud Zoom V1.03.

Насколько я понял, новая версия Cloud Zoom V3.1 платная и начинается от 25 евро да лицензию на один сайт, а вот старая версия имеет MIT License, то есть мы можем спокойно использовать её в своих проектах, за что спасибо автору. Я правда нашел один недостаток в скрипте, а именно невозможность показывать разные заголовки при выводе галереи изображений. Версию скрипта, где данная проблема устранена, можно скачать с моего сайта, ссылка есть в конце статьи. Пример работы скрипта.

УСТАНОВКА

Пример страницы, использующей Cloud Zoom для увеличения картинок и создания галереи. Читаем внимательно комментарии, в них описана работа скрипта:

<html>
<head>
<!-- Загрузка Cloud Zoom CSS файла -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<!-- Загрузка библиотеки jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Загрузка скрипта Cloud Zoom -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.3.min.js"></script>
</head>
<body>
 
<!--
Картинки для увеличения должны быть заключены в ссылки с классом 'cloud-zoom'.
Значение href ссылки должно указывать на большое изображение.
Настройки задаются в атрибуте rel у ссылки.
Опции должны быть записаны в формате объекта JavaScript,
но без использования фигурных скобок.
-->
 
<a href='/images/bigimage01.jpg' class='cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4">
<img src="/images/smallimage01.jpg" alt='' title="Описание изображения" />
</a>
 
<!--
Вы можете создать галерею изображений, указав для ссылки класс 'cloud-zoom-gallery'.
Значение href ссылки должно указывать на большое изображение.
В атрибуте rel ОБЯЗАТЕЛЬНО нужно указать id элемента, где будет выведено
увеличение (useZoom: 'zoom1'), и путь к маленькой картинке (smallImage: /images/...)
-->
 
<a href='/images/bigimage01.jpg' class='cloud-zoom-gallery'
rel="useZoom: 'zoom1', smallImage: '/images/smallimage01.jpg', title:'описание 1' ">
<img src="/images/tinyimage01.jpg" alt="описание 1"/></a>
 
<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery'
rel="useZoom: 'zoom1', smallImage: ' /images/smallimage02.jpg', title:'описание 2' ">
<img src="/images/tinyimage02.jpg" alt="описание 2"/></a>
 
<a href='/images/zoomengine/bigimage03.jpg' class='cloud-zoom-gallery'
rel="useZoom: 'zoom1', smallImage: '/images/smallimage03.jpg', title:'описание 3' ">
<img src="/images/tinyimage03.jpg" alt="описание 3"/></a>
 
</body>
</html>

В примере добавлен новый атрибут title, которого нет в обычной версии скрипта CLOUD ZOOM. Без него значение параметра title у выводимой картинки не меняется, вне зависимости установлен параметр showTitle (показ заголовков) или нет.

Для интересующихся, в сам скрипт, в секцию отвечающую за вывод галереи изображений, добавлена всего одна строка:

$('#' + data.useZoom + ' img').attr('title', event.data.data('relOpts').title);

НАСТРОЙКА

Параметры настроек должны быть указаны в атрибуте rel ссылки, которая содержит уменьшенное изображение.

Параметры:

ПАРАМЕТРЗНАЧЕНИЕ ПО УМОЛЧАНИЮОПИСАНИЕ
zoomWidth‘auto’Ширина окна с увеличенной картинкой. Если параметр не задан, то будет взята ширина маленькой картинки
zoomHeight‘auto’Высота окна с увеличенной картинкой. Если параметр не задан, то будет взята высота маленькой картинки
position‘right’Задает положение окна с увеличением относительно маленькой картинки. Возможные значения ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ или вы можете указать id элемента, внутри которого будет выведена увеличенная картинка (например position: ‘element1′)
adjustX0Задает смещение по X для окна с увеличением
adjustY0Задает смещение по Y для окна с увеличением
tintfalseОпределяет цвет, которым будет выделена область увеличения на маленькой картинке. Значение должно быть задано в hex-формате (т.е. #aa00aa). Не работает если указа параметр softFocus
tintOpacity0.5Задает степень прозрачности слоя, перекрывающего маленькое изображение. Возможны значения от 0 до 1
lensOpacity0.5Указывает прозрачность зоны увеличения. Возможны значения от 0 0 до 1
softFocusfalseЭффект размытия для маленького изображения
smoothMove3Плавность перемещения картинки. При значении 1 плавность отключенаshowTitletrueВыводит заголовок к картинке
showTitletrueВыводит заголовок к картинке
titleOpacity0.5Задает прозрачность заголовка
titleнетТекст заголовка к картинке

Для настройки внешнего вида Cloud Zoom использует небольшой CSS файл cloud-zoom.css. Вы можете самостоятельно менять любые параметры для достижения нужного эффекта, благо файл совсем небольшой и имеет простую структуру.

скачать cloud-zoom-1.03.zip

Если вы считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 4

  1. 2015-04-14 в 18:24:34 | Adilet

    Как поменять область которую нужно увеличить? на пример там стоит 50% а мне нужно по больше=)

  2. 2015-04-15 в 08:56:49 | dre@mer]]>avatar]]>

    Не совсем понятен вопрос. За ширину и высоту увеличенного окна отвечают параметры zoomWidth и zoomHeight. А сама область увеличения зависит от размеров ваших изображений и размера увеличенного окна.

  3. 2015-06-03 в 16:47:16 | Катя

    Как сделать рамку (border) на маленькой активной картинке?

  4. 2016-04-08 в 10:25:21 | Darik

    Как сменить картинку в зуме динамически?

comments powered by HyperComments
Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.