Главная » Файлы » Прочие скрипты » jQuery

Эффекты увеличения изображений через плагин Cloud Zoom
23.06.14, 08:16:31

Скачать файл




Неплохой плагин с несколькими видами увеличения картинок

Для начала перейдите на официальный сайт и посмотрите там рабочие ДЕМО

Если эффекты увеличения впечатлили, переходим к установке:

В head на всех страницах сайта, где будет применяться данный плагин, вставляйте следующий код:
Код
<link href="/css/cloud-zoom.css" rel="stylesheet" type="text/css" />


Далее после /head на тех же страницах вставляйте:
Код
<script type="text/JavaScript" src="/js/cloud-zoom.min.js"></script>


Теперь в то место, где будут располагаться картинки, обрабатываемые плагином zoom вставляйте:

1) Для эффекта появления увеличенного изображения справа от картинки:
Код
<a href='Ссылка на большое изображение' class = 'cloud-zoom' id='zoom1' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">  
  <img src="Ссылка на уменьшенное изображение" title="Название или описание картинки" />  
  </a>

Обратите так же внимание, что для каждой новой картинки, которая будет обработана этим эффектом, необходимо указать свой id (id='zoom2', id='zoom3' и т.д.);

2) Для эффекта появления увеличенного изображения внутри исходной картинки:
Код
<a href="Ссылка на большое изображение" class="cloud-zoom" id="zoom1" rel="position:'inside' , showTitle:false, adjustX:-4, adjustY:-4">  
  <img src="Ссылка на уменьшенное изображение" title="Название или описание картинки" />  
  </a>

Здесь тоже не забудьте проставить для каждой новой картинки свой id (id='zoom2', id='zoom3' и т.д.);

Теперь осталось лишь залить папки из архива в корень вашего сайта

Всё! Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: Zoom, изображений, Через, увеличения, плагин, cloud, эффекты
Просмотров: 328 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: