Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

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

Cloud zoom v3.1 - увеличение изображения на JQuery для uCoz Плагин предназначенный для увеличения изображений вроде - Magic Zoom, коему он нисколько не уступает по функционалу: плавное увеличение, настройка мягкого\разнооттеночного фокуса, внутреннее увеличение зума. Подобное масштабирование изображений можно часто видеть на сайтах разных интернет-магазинов, где нужно более подробно рассмотреть уменьшенное изображение товара, поэтому рекомендуется использовать этот плагин только с изображениями большого формата. Несмотря на всю многофункциональность плагина, сам скрипт весит всего 6Кб, поэтому перегружать сайт не будет.

Плагин кроссбраузерный, проверен на работоспособность в IE6 +, Firefox, Chrome, Opera, Safari. Здесь представлена неофициальная версия, о чем будет напоминать надпись в левом нижнем углу изображений (в остальном она ничем не ограничена), чтоб ее убрать - придется купить лицензию (43$) на официальной странице разработчика.

Установка плагина:
1. Скачайте архив. Создайте в корне файлового менеджера папку cloud-zoom, и в нее залейте все содержимое архива.
2. Теперь нужно прописать пути к файлам скрипта и стилей. Ставим перед </body>
<link type="text/css" href="/cloud-zoom/cloudzoom.css" rel="stylesheet"/>
<script type="text/javascript" src="/cloud-zoom/cloudzoom.js"></script>
<script type="text/javascript">CloudZoom.quickStart();</script>

3. И теперь чтоб применить функцию увеличения к необходимому изображению, просто добавляете к нему атрибут class="cloudzoom", чтоб оно выглядело примерно так:
<img width="290" class="cloudzoom" src="Ссылка на фото" title="Название фото"/>

** Текст из title="" будет выводиться в подпись масштабируемого изображения.

По сути это все, скрипт уже будет работать, но он будет работать по стандартным настройкам. Всего же этих настроек, то есть опций которые можно менять по своему усмотрению, более 40.

Если вы хотите что-то в работе скрипта изменить, нужно кроме атрибута class="cloudzoom" - добавить еще один атрибут (data-cloudzoom="настройки"), и в нем указывать нужные настройки. Например вот так:
<img width="290" class="cloudzoom" src="Ссылка на уменьшенное фото" title="Название фото"
data-cloudzoom=" 
zoomImage: 'Ссылка на полное фото',
zoomSizeMode: 'image',
captionPosition: 'top',
zoomPosition: 3,
tintColor: '#FFA1E0',
zoomOffsetX: 15,
zoomOffsetY: 0
"/>

** Настройки нужно перечислять через запятую.
** Настройки можно писать все в одну строку, или как я - переносить каждую на новую.
** Все значения, кроме числовых, true и false - нужно заключать в 'кавычки'.

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

Напомню, это лишь несколько настроек. ознакомиться со всеми остальными настройками и их значениями - вы можете на официальной странице.
cloud_zoom_v3_1.zip [9.17 Kb] (cкачиваний: 53)

6.3
4 оценок
9.0
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
7.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
5.0
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
4.0
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
mever
29 марта 2018 08:37
+ 0 -
Походу руки не из того места, для интернет-магазина это не подошло(
na3uTuB4uk
29 марта 2018 09:25
+ 0 -
mever,
Обновил, попробуй еще.
Nk-CS.Ru - The Best of Web!
mever
30 марта 2018 03:29
+ 0 -
na3uTuB4uk,
Это понятно, но у меня интернет-магазин, а там PHOTO не IMAGE... Вот в чем проблема, я его пытаюсь настроить, но доступа нету или надо менять полностью CSS
na3uTuB4uk
30 марта 2018 09:34
+ 0 -
mever,
А что разве нет прямой ссылки на фото там? Я модуль фотоальбом не очень знаю, но думаю есть такой код.

mever,
Поставил на тестовый сайт, все прекрасно работает.
Вот скрин: http://nk-torrents.ucoz.ru/photo.png
Вот так вывел картинку:
<img width="290" class="cloudzoom" src="<?if($FULL_PHOTO_DIRECT_URL$)?>$FULL_PHOTO_DIRECT_URL$<?else?>$PHOTO_DIRECT_URL$<?endif?>" title="$PHOTO_NAME$"/>
Nk-CS.Ru - The Best of Web!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно