Главная » 2011 » Ноябрь » 8 » Оригинальный мини-слайдер изображений через плагин popeye на jQuery (Javascript)
08.11.2011, 20:19

Оригинальный мини-слайдер изображений через плагин popeye на jQuery





ДЕМО МАТЕРИАЛА

Установка:

После /head на нужных страницах вставляйте:
Code
<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>

Следующий код в то место, где будет сам мини-слайдер:
Code
<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
Материал взят с сайта infoscript.ru
Теги: Скачать Оригинальный мини-слайдер изображений через плагин popeye на jQuery
Скачать "Оригинальный мини-слайдер изображений через плагин popeye на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://siteforsites.ru/load/130-1-0-1554
Категория: JavaScript's | Просмотров: 2347 | Добавил: manikom-auto | Рейтинг: 0.0/0 |
Теги: через, оригинальный, изображений, jQuery, плагин, На, мини-слайдер, popeye
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]