Cloud zoom v3.1 - увеличение изображения на JQuery для uCoz (условно бесплатно)

Плагин предназначенный для увеличения изображений вроде - 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.

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

---