Данный скрипт сохранит вам деньги от покупки платных за огромнейшие финансы,ясное дело что мы платить за такое не хотим по этому был создан данный скрипт на системе JQuery в системе Ucoz,сложного в нём не чего нету,архив вам скачивать не придётся всё будет находится на сайте Testcs.Ru,это самая свежая версия данного скрипта.Но есть минусы на этом скрипте нельзя регулировать увеличение картинки колёсиком,это наверное единственный недостаток в этом скрипте и да,давайте не забывать что всё таки скрипт бесплатный и по этому для него минусы это вполне приемлемо.
И так нужно начать уже скорее бы установку нашего скрипта:
1)Скачивать Архив нам НЕ Нужно файлы уже залиты на наш сервис Testcs.Ru если вам всё таки нужны данные файлы я оставлю для вас архив.
2)Копируем текст ниже и вставляем его перед


Так на заметку если у вас не включена JQuety библиотека а в UCOZ она автоматически подключена,то включите ее.

3)Теперь что бы применить к картинке эффект увеличения нам потребуется следующий код слегка изменённый


Что мы сделали ?А мы данный код обвели блоком и еще добавить атрибут class="clouds-zooms"
Ни кто нам не запрещает добавлять такие атрибуты как alt="" и добавить в него название что типо как нужно с точки зрения SEO и опять же таки атрибут title=""
для тех кто не знает в этом атрибуте будет выводится текст рядом с вашим окном уличения естественно если у вас он включен в настройках вашего сайта.
Атрибут rel="" поможет вам прописать настройки в этом скрипте только не забывайте внести его в блок
Держите список настроек
Настройки:
Опция По умолчанию Описание
1)zoomWidth auto Ширина окна масштабирования, в пикселях.
По-умолчанию она автоматически подстраивается под
уменьшенное изображение.

2)zoomHeight auto Высота окна масштабирования, в пикселях. По-
умолчанию она автоматически подстраивается под
уменьшенное изображение.

3)position right Задает положение окна масштабирования по
отношению к уменьшенному изображению.
Допустимые значения: left, right, top, bottom, inside.
Также можно указать идентификатор любого html-
элемента, к которому будет привязано окно
масштабирования.

4)adjustX 0 Горизонтальное смещение окна масштабирования.

5)adjustY 0 Вертикальное смещение окна масштабирования.

6)tint n/a Определяет цвет, которым будет залито уменьшенное
изображение при наведении курсора. Цвет нужно
указывать в шестнадцатеричном формате, например
#aa00aa. При его использовании - линза будет
прозрачной. По-умолчанию заливка отсутствует.

7)tintOpacity 0.5 Прозрачность заливки уменьшенного изображения.
Регулируется в диапазоне от 0 (полностью
прозрачная) до 1 (полностью непрозрачная).

8)softFocus true/false Эффект размытия уменьшенного изображения, при
наведении курсора. Возможно два положения: true
(вкл) или false (выкл). При его использовании - линза
будет прозрачной.

9)smoothMove 3 Плавность движения изображения в зуме, чем выше
значение - тем плавнее, чем ниже - тем резче.
Диапазон значений: от 0 до 10.

10)lensOpacity 0.5 Прозрачность линзы, кстати цвет ее заливки
указывается в CSS-файле (по-умолчанию он белый).
Регулируется в диапазоне от 0 (полностью
прозрачная) до 1 (полностью непрозрачная).

11)showTitle true/false Отображение содержимого атрибута title
изображения, если оно есть. Возможно два
положения: true (вкл) или false (выкл).

12)titleOpacity 0.5 Прозрачность заголовка из title изображения, если
оно есть и включено. Регулируется в диапазоне от 0
(полностью прозрачный) до 1 (полностью
непрозрачный).

По настройкам написал вам вроде бы всё
1)Настройки перечисляйте только через запятую либо они у вас просто не будут работать,или какие то баги будут
2)Вы можете писать всё в одну строку.
Код для встроенной Галереи:

Код

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

Спасибо всем за внимание если есть какие то ошибки прошу указать в комментариях и не забывайте поблагодарить человека который опубликовал данную статью данный материал был взят с другого портала,но с какого уже не помню прошу просить если вы нашли данную статью.С вами были Администратор сайта Www.Testcs.ru

---

Чтобы скачивать файлы вам нужна Авторизация или Регистрация Это займёт не больше 2х минут...

---

Скриншот · Поблагадорить · Жаловаться

---

Метки: JQuery(бесплатно), скрипт, изображения, системе, Увлечение, ucoz