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

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

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

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

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

2. Теперь нужно прописать пути к файлам скрипта и стилей. Ставим перед :
Код
<link rel="stylesheet" type="text/css" href="/cloud-zoom/cloud-zoom.css"/>  
<script type="text/javascript" src="/cloud-zoom/cloud-zoom.js"></script>


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

3. Теперь оформляем картинку, чтоб применить к ней эффект увеличения:
Код
<a href="ссылка на полное изображение" class="cloud-zoom">
  <img src="ссылка на уменьшенное изображение"/>
  </a>


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

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

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

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

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



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

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

Кроме всего прочего, в плагине (как в новой версии, так и в этой) есть своя галерея, позволяющая прописать сразу несколько изображений в компактном блоке. Чтоб использовать галерею, изображения нужно прописывать немного иначе, вот пример:
Код
<div class="zoom-section" title="блок галереи">  
<div class="zoom-small-image" title="блок основоно изображения">  
<a href="ссылка на полное изображение1" id="zoom1" class="cloud-zoom"><img src="ссылка на уменьшенное изображение1"/></a>  
</div>  
<div class="zoom-desc" title="блок миниатюр">  
<a href="ссылка на полное изображение1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'ссылка на уменьшенное изображение1'"><img src="ссылка на уменьшенное изображение1"/></a>  
<a href="ссылка на полное изображение2" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'ссылка на уменьшенное изображение2'"><img src="ссылка на уменьшенное изображение2"/></a>  
<a href="ссылка на полное изображение3" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'ссылка на уменьшенное изображение3'"><img src="ссылка на уменьшенное изображение3"/></a>  
</div>  
</div>


То есть здесь уже необходимо к основному изображению добавить уникальный 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-файле.

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

По данной ссылке, Вы можете скачать или купить архив данного материала.

Скриншоты:
Увеличение изображения на JQuery для uCoz


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
Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно