Orbit - плагин слайдшоу

Отличный jQuery плагин для создания слайдшоу на сайте.

HTML

Для простеших случаев, например, только два изображения:

<div id="featured"> 
    <img src="captions.jpg" alt="Заголовок" />
    <img src="features.jpg" alt="Возможности" />
</div>

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

CSS

Подключаем файл стилей оформления слайдера и стиль демонстрационной странички:

<link rel="stylesheet" href="../orbit-1.2.3.css"> <link rel="stylesheet" href="demo-style.css">

JS

В шапке подключаем jQuery и сам плагин orbit:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/jаvascript" src="../jquery.orbit-1.2.3.min.js"></script>

Далее инициализируем плагин с настройками:

$(window).load(function() {
   $('#featured').orbit();
});

Идентификатор #featured естественно может быть изменен.   

Опции

$('#featured').orbit({
     animation: 'fade',                  // вид анимации: fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // скорость анимации в мс
     timer: true,              // показывать таймер: true или false
     advanceSpeed: 4000,          // если таймер включен, то указывается время между переходами в мс 
     pauseOnHover: false,          // пауза слайдера при наведении курсора
     startClockonmouseout: false,      // запускать часы при выводе курсора из области слайдера
     startClockonmouseoutAfter: 1000,      // через какое время после вывода курсора из области слайдера таймер запустится
     directionalNav: true,          // ручная навигация
     captions: true,              // использовать заголовки?
     captionAnimation: 'fade',          // анимация для заголовков: fade, slideOpen, none
     captionAnimationSpeed: 800,      // скорость анимации заголовков в мс
     bullets: false,             // true или false для активации навигации с миниатюрами
     bulletThumbs: false,         // миниатюры для "точек"
     bulletThumbLocation: '',         // путь до местонахождения миниатюр
     afterSlideChange: function(){}      // пустая функция
});

Заголовки на HTML

У плагина orbit есть возможность добавлять заголовки оформленные с помощью html и css к слайдам.

HTML

<div id="featured"> 
    <img src="dummy-images/overflow.jpg"/>
    <img src="dummy-images/captions.jpg" data-caption="#htmlCaption"/>
    <img src="dummy-images/features.jpg"  />
</div>
<!-- Заголовки для Orbit -->
<span class="orbit-caption" id="htmlCaption">
    <strong>Это Заголовок:</strong> Он содержит <a href="#">ссылки</a>, <em>оформление</em> или что-то ещё валидной разметки.
</span>

Тут мы после трех изображений добавляем тег SPAN с классом "orbit-caption" и идентификатором "htmlCaption", который указывает для какого изображения слайда будет использоваться заголовок. Так для изображения добавляем атрибут data-caption="#htmlCaption".
Если хотите анимировать этот заголовок, то воспоьзуйтесь опциями плагина.

Навигация по миниатюрам

HTML

Три явные картинки заданные тегом <img>. И неявная картинка, которая задана свойством background в классе "content" DIV блока. Название файлов миниатюр задаем в атрибутах data-thumb="".

<div id="featured"> 
     <div class="content" data-thumb="coffee-thumb.jpg">
          <h1>Контент внутри слайда.</h1>
          <h3>Выдели меня... я текст.</h3>
      </div>            
      <img src="dummy-images/overflow.jpg" data-thumb="overflow-thumb.jpg" />
      <img src="dummy-images/captions.jpg" data-thumb="captions-thumb.jpg"/>
      <img src="dummy-images/features.jpg"  data-thumb="features-thumb.jpg"/>
</div>

JS

Указываем, что использовать буллет, использовать миниатюры для буллет и указать путь до папки, где хранятся наши миниатюры:

$(window).load(function() {
    $('#featured').orbit({
         bullets:true,
         bulletThumbs: true,
         bulletThumbLocation: 'orbit/'
    });
});

Если просто указать    одну опцию bullets: true, то вместо миниатюр будут "точки", нажимая на которые можно перемещаться по слайдам.

Использование Контента на слайде

HTML

Пример реализации рассмотрен выше.
Чтобы поместить какой-то html текст на слайд, нужно обязательно поместить его в блок DIV, для которого назначить какой-нибудь класс, например "content", а для класса обязательно указать свойство background с картинкой слайда:

        <div id="featured"> 
            <div class="content">
                <h1>Контент внутри слайда.</h1>
                <h3>Выдели меня... я текст.</h3>
            </div>            
             ...
            <img src="dummy-images/features.jpg"/>
            ...
        </div>