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

Апрель, 26th 2014Рубрика: Web 26327
Подписаться на комментарии по 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>

<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/JavaScript" src="/js/cloud-zoom.1.0.3.min.js"></script>
</head>
<body>



<a href='/images/bigimage01.jpg' class='cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4">
<img src="/images/smallimage01.jpg" alt='' title="Описание изображения" />
</a>



<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′)
adjustX	0	Задает смещение по X для окна с увеличением
adjustY	0	Задает смещение по Y для окна с увеличением
tint	false	Определяет цвет, которым будет выделена область увеличения на маленькой картинке. Значение должно быть задано в hex-формате (т.е. #aa00aa). Не работает если указа параметр softFocus
tintOpacity	0.5	Задает степень прозрачности слоя, перекрывающего маленькое изображение. Возможны значения от 0 до 1
lensOpacity	0.5	Указывает прозрачность зоны увеличения. Возможны значения от 0 0 до 1
softFocus	false	Эффект размытия для маленького изображения
smoothMove	3	Плавность перемещения картинки. При значении 1 плавность отключенаshowTitletrueВыводит заголовок к картинке
showTitle	true	Выводит заголовок к картинке
titleOpacity	0.5	Задает прозрачность заголовка
title	нет	Текст заголовка к картинке

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

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

Подписывайтесь на канал

Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.

Потерянные заказы в Opencart (ocStore). Вылавливаем баги системы.

Система комментирования HyperComments для сайта

Трудный путь в SEO: кое что о поисковой оптимизации сайта

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

2015-04-14 в 18:24:34 | Adilet
Как поменять область которую нужно увеличить? на пример там стоит 50% а мне нужно по больше=)
2015-04-15 в 08:56:49 | dre@mer]]>]]>
Не совсем понятен вопрос. За ширину и высоту увеличенного окна отвечают параметры zoomWidth и zoomHeight. А сама область увеличения зависит от размеров ваших изображений и размера увеличенного окна.
2015-04-16 в 09:44:07 | Tiset Tig
Спасибо, выручили))))
2015-06-03 в 05:07:48 | Екатерина Смирнова
Как сделать рамку (border) на маленькой активной картинке?
2015-06-03 в 16:47:16 | Катя
Как сделать рамку (border) на маленькой активной картинке?
2015-09-05 в 01:54:55 | Арт-Стандарт
link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" /
2015-09-05 в 01:54:55 | Арт-Стандарт
чувак.. ну почему все так. Ничего нельзя скопировать!? Урок для мазахистов(:cry:)(:wonder:)
2016-04-08 в 10:25:21 | Darik
Как сменить картинку в зуме динамически?