Отличный 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">

javascript

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

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

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

<script type="text/javascript">
            $(window).load(function() {
                $('#featured').orbit();
            }); </script>

Идентификатор #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>

javascript

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

        <script type="text/javascript">
            $(window).load(function() {
                $('#featured').orbit({
                bullets:true,
                bulletThumbs: true,
                bulletThumbLocation: 'orbit/'
                });
            });
        </script>

Если просто указать    одну опцию 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>

Источник: Orbit slider (чуть больше информации)

СКАЧАТЬСкачек: 5865
750,37 Kb
Кто скачал?

ДЕМОПосмотреть
пример