Увеличение изображения на JQuery для uCoz

По сути главное функциональное отличие этой версии от новой, то что здесь нельзя регулировать увеличение колесиком мыши (впрочем возможность настроить статичное увеличение как надо - никуда не делась), но думаю это не так важно. В целом конечно настроек тут намного меньше, если в новой версии их около 40-ка, то тут чуть больше 10-и. Впрочем в новой версии большинство настроек не особо нужны, и в этой - самые необходимые тоже есть.

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

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

2. Теперь нужно прописать пути к файлам скрипта и стилей. Ставим перед :

** Кроме того, обязательно должна быть подключена jquery-библиотека. Но на uCoz-сайты ее ставить не надо, т.к там она есть по-умолчанию.

3. Теперь оформляем картинку, чтоб применить к ней эффект увеличения:


То есть все что нужно, это обнести изображение блоком и добавить к нему атрибут class="cloud-zoom", при этом разумеется как и показано, в блок нужно вставить ссылку на полное изображение, а в - ссылку на уменьшенное (желательно, чтоб полное и уменьшенное изображения имели одинаковые пропорции).

Естественно никто не запрещает добавить к изображению атрибут alt="" и указать в нем название, что необходимо с точки зрения SEO, а также атрибут title="" - текст из которого кстати может выводиться рядом с окном увеличения - если вы это включите в настройках.

Но в таком минимальном виде, скрипт будет работать с настройками по-умолчанию, а если вы хотите что-то настроить по своему, то к блоку нужно добавить атрибут rel="" и в нем прописывать все настройки.

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

Опция По умолчанию Описание



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

Встроенная галерея

Кроме всего прочего, в плагине (как в новой версии, так и в этой) есть своя галерея, позволяющая прописать сразу несколько изображений в компактном блоке. Чтоб использовать галерею, изображения нужно прописывать немного иначе, вот пример:

То есть здесь уже необходимо к основному изображению добавить уникальный id (в этом примере zoom1), и потом его продублировать в атрибуте rel миниатюр (useZoom: 'zoom1'). Кстати, в настройках миниатюр вам надо только прописать свои изображения (smallImage: 'ссылка') и опять же уникальный id (или использовать мой zoom1). Больше в настройках (в rel) миниатюр - не нужно ничего менять или добавлять, т.к миниатюры - просто переключают картинки в основном изображении, поэтому все настройки - прописывайте в rel основного изображения.

Ну и так же как раньше, обязательно у основного изображения должен быть атрибут class="cloud-zoom", а у миниатюр class="cloud-zoom-gallery". Блоки же zoom-section, zoom-small-image и zoom-desc - не являются обязательными, но они вам скорее всего понадобятся, чтоб оформить галерею - к тому же стили для них уже есть в CSS-файле.

Собственно, на этом все - надеюсь кому то это будет нужно, т.к я очень долго искал все это, разбирался, переводил и оформлял - чтоб вам было понятно.

1771_Cloud-zoom.1.0..zip [29.2 Kb] (Скачали 29)