ImageZoom - увеличение иображения для uCoz

3314 просмотров Alan_Writer 27.07.2015

Скачать 📥 Демо ▶️

Итак очередной плагин для увеличения изображения, на этот раз вроде последний. Это опять же совершенно другая версия - ImageZoom, и у нее есть реальные отличия и достоинства. Здесь много что упрощено, настроек еще меньше - хотя опять же самое необходимое есть, нету встроенной галереи - но ведь она и не всем нужна, а зато весит плагин - всего 4кб. Что еще важно, как и в обоих версиях Cloud Zoom - все настройки тут прописываются в блоке самой картинки, не нужно создавать отдельных скриптов-вызова и даже прописывать к каждой картинке уникальный идентификатор. Ну и разумеется плагин бесплатный.

Установка плагина

1. Скачайте архив. Создайте в корне файлового менеджера папку imagezoom, и в нее залейте все содержимое архива.

2. Теперь нужно прописать путь к файлу скрипта. Ставим перед </body>:
Код
<script type="text/javascript" src="/imagezoom/imagezoom.js"></script>
** Кроме того, обязательно должна быть подключена jquery-библиотека. Но на uCoz-сайты ее ставить не надо, т.к там она есть по-умолчанию.

3. Оформляем картинку, чтоб применить к ней эффект увеличения:
Код
<img src="уменьшенное изображение" data-imagezoom="полное изображение"/>

Да-да не удивляйтесь, все что нужно - это добавить атрибут data-imagezoom и вставить в него ссылку на полное изображение. Так плагин будет работать с настройками по умолчанию, их можно изменить и в самом скрипте, они в понятной форме указаны в самом его начале. Но стандартные настройки будут применяться ко всем изображениям, поэтому если вы хотите чтоб у одной картинки настройки увеличения были одни, у другой другие и тд, то нужно аналогичным образом добавить атрибуты других настроек в блок самой картинки и изменить их значения на нужные.

Вот список всех имеющихся опций, их возможные положения и значения:

Опция (атрибут)По умолчаниюОписание
data-focusborder1px solid #222Рамка линзы. Стиль и цвет указываем любые.
data-cursorcolor#ffffffЦвет заливки линзы.
data-opacity0.5Прозрачность заливки линзы.
data-cursorcrosshairТип курсора.
data-zoomviewsize[240,300]Размер окна масштабирования (ширина, высота).
data-zoomviewborder1px solid #222Рамка окна масштабирования.
data-zoomviewpositionrightПозиция окна масштабирования (left или right)
data-zoomviewmargin10Боковые отступы окна масштабирования.
data-magnification2.5Степень увеличения (от 1 до 10)


Вот и все, остался лишь еще один подобный плагин, и далее уже будут другие не мене интересные и полезные скрипты.

Теги: увеличение, ucoz, ImageZoom, изображения, jQuery
0 Комментариев