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

Оригинальный мини-слайдер изображений через плагин popeye на jQuery для uCoz
23.06.14, 14:58:12

Скачать файл




Симпатичный слайдер, который очень удачно впишется в любые блоки

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="/css/jquery.popeye.style.css" media="screen" />

  <script type="text/javascript" src="/js/jquery.popeye-2.0.2.min.js"></script>


Следующий код в то место, где будет сам мини-слайдер:
Код
<div class="example">
<div class="ppy" id="ppy3">
<ul class="ppy-imglist">
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-prev" title="Previous image">Предыдущее</a>
<a class="ppy-switch-enlarge" title="Enlarge">Развернуть</a>
<a class="ppy-switch-compact" title="Close">Закрыть</a>
<a class="ppy-next" title="Next image">Следующее</a>
</div>
</div>
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-caption">
<span class="ppy-text"></span>
</div>
</div>
</div>

  <script type="text/javascript">
$(document).ready(function () {  
var options2 = {  
caption: false,  
navigation: 'permanent',  
direction: 'left'  
}  
var options3 = {  
caption: 'permanent',  
opacity: 1  
}  

$('#ppy3').popeye(options3);  
});  
  </script>


Теперь залейте скрипт из прикреплённого архива в папку js, стили в папку css и картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, оригинальный, Через, ucoz, на, плагин, JQuery, Popeye, для, мини-слайдер
Просмотров: 388 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: