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

Скачать

Особенности

  • Протестирована работа в следующих браузерах: IE6+, Firefox, Chrome, Opera, Safari
  • Простая интеграция на страницу с валидным HTML
  • Маленький размер скрипта – 6Kb
  • Сглаживание при перемещение мышки
  • Предусмотрено создание галереи изображений
  • Вывод увеличение картинки поверх маленькой
  • Предусмотрена ситуация с отключенными скриптами
  • Доступ к данным для текстовых браузеров или браузерос без поддержки CSS

Установка

Ниже приведен HTML код страницы, на которой применяется плагин Cloud Zoom для увеличения картинок и создания галереи. Обратите внимание на комментарии.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

Настройка

Параметры настроек должны быть указаны в атрибуте 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 плавность отключена
  • showTitle
    true
    Выводит заголовок к картинке
  • titleOpacity
    0.5
    Задает прозрачность заголовка

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

Категории: галерея, показ картинок

Похожие записи: JQZoom – «лупа» для картинок | cycle – слайдшоу со множеством эффектов | jLoupe – jQuery лупа | jSquares – подписи к картинкам | ColorBox – галерея LightBox плагин для jQuery |

  1. Amok_Yu :
    Март 11th, 2011

    Cупер! . Классный скрипт. Давно искал что-то подобное. СПАСИБО!

    [Ответить]

  2. Андрей :
    Март 14th, 2011

    Скрипт действительно классный!
    Но у меня возникла проблема, может кто подскажет как ее решить.
    Все делаю по инструкции. Все работает, но с галереей возникают проблемы (сайт на Joomla 1.5.22).
    Если вписываю код в index.php, то галерея работает без проблем, если же этот же код вставляю в статью, то при клике на миниатюры, изображение не подгружается в основное окно (появляется сообщение «Loading…» и все). Ни как не пойму в чем дело.

    [Ответить]

    AlexSol отвечает:
    Март 14th, 2011

    если статьи в поддиректории,
    проверьте пути к картинкам (укажите абсолютные)

    [Ответить]

    Андрей отвечает:
    Март 14th, 2011

    Вот часть кода галереи:


    подскажите пожалуйста, что не так?
    При открытии статьи отображается и основное изображение (при наведение лупа работает) и галерея, но как и говорил, при клике на миниатюру из галереи она не подгружается в «основное» окно.
    Заранее спасибо.

    [Ответить]

    AlexSol отвечает:
    Март 14th, 2011

    приведите ссылку на страницу

    [Ответить]

    Андрей отвечает:
    Март 14th, 2011

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

    [Ответить]

    AlexSol отвечает:
    Март 14th, 2011

    прежде всего проверяйте пути к картинкам. отладчик в firefox или chrome вам поможет

  3. Андрей :
    Март 14th, 2011

    Вот ссылка http://www.jaslin.ru/555
    Если не затруднит, гляньте пожалуйста.

    [Ответить]

    AlexSol отвечает:
    Март 14th, 2011

    eу вас очень много разных скриптов и библиотек используется. сейчас идет ошибка в mootols

    прочитайте про jQuery.noConflict() и попробуйте применить его http://habrahabr.ru/blogs/jquery/38526/

    [Ответить]

    Андрей отвечает:
    Март 14th, 2011

    Спасибо за направление, стало ясно куда копать )))

    [Ответить]

Оставьте свой комментарий