ORBIT - ПЛАГИН СЛАЙДШОУ


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">


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
Три явные картинки заданные тегом . И неявная картинка, которая задана свойством 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, то вместо миниатюр будут "точки", нажимая на которые можно перемещаться по слайдам.

ORBIT - ПЛАГИН СЛАЙДШОУ

ORBIT - ПЛАГИН СЛАЙДШОУ


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

Разметка HTML
Пример реализации рассмотрен выше.
Чтобы поместить какой-то html текст на слайд, нужно обязательно поместить его в блок DIV, для которого назначить какой-нибудь класс, например "content", а для класса обязательно указать свойство background с картинкой слайда:
        <div id="featured"> 
            <div class="content">
                <h1>Контент внутри слайда.</h1>
                <h3>Выдели меня... я текст.</h3>
            </div>            
             ...
            <img src="dummy-images/features.jpg"/>
            ...
        </div>


Скачать исходник:
orbit-1.2.3.rar


скрипт скрипт ORBIT - ПЛАГИН СЛАЙДШОУ
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2336
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация