Слайдшоу

Этой статьей откроется цикл статей посвященных, разработанным мной, плагинам. Я не претендую на эксклюзивный материал и знаю, что на данный момент разработано много подобных плагинов, я лишь хочу представить мою версию.

Каждый плагин я стараюсь сделать наиболее универсальным, позволяющий web-разработчикам подключать его в свой код изменяя минимум параметров при различной html структуре.

Итак, хочу представить Вам – слайдшоу.


Просмотреть пример в новом окне

Для разработки плагина были поставлены такие задачи:

  • возможность автоматического переключение картинок
  • переключение картинок при помощи навигации
  • пауза
  • отображение в слайдах не только картинок, но и различный контент
  • отображение номера текущего слайда

Требования HTML/CSS верстки для плагина

При разработке плагина я старался как можно меньше привязываться к определенным структурам HTML и CSS кода, но все же некоторых нюансов избежать не получилось. Т.к. слайдшоу использует fade эффект, то слайд элементы должны находится друг под другом, а это лучше всего достигнуть с помощью абсолютного позиционирования.

HTML код примера №1

<div class="gallery">
    <div class="img-holder">
        <img src="images/pic01.jpg" alt="" class="active" />
        <img src="images/pic02.jpg" alt="" />
        <img src="images/pic03.jpg" alt="" />
        <img src="images/pic04.jpg" alt="" />
        <img src="images/pic05.jpg" alt="" />
    </div>
    <div class="nav">
        <a href="#" class="prev">prev</a>
        <a href="#" class="pause">pause</a>
        <a href="#" class="next">next</a>          
        <p><span class="current">1</span>/<span class="all">all</span></p>
    </div>
    <ul>
        <li><a href="#"><img src="images/pic01-small.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/pic02-small.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/pic03-small.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/pic04-small.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/pic05-small.jpg" alt="" /></a></li>
    </ul>
</div>

Соответственно для этого кода я применил такие CSS свойства:

.gallery .img-holder {
    position:relative;
    width:402px;
    height:300px;
}
.gallery .img-holder img {
    position:absolute;
    top:0;
    left:5px;
    z-index:0;
}
.gallery .img-holder img.active {
    z-index:1;
}

Обратите внимание что для активного элемента я поставил z-index:1, а для остальных z-index:0, это сделано для того что б при загрузке сайта сверху лежала первая картинка а не последняя.

и последний нюанс… :) вы может заметили, что превьюшки никак не связаны со слайд элементами. Я считаю что это лишняя нагрузка HTML кода. Поэтому в моем плагине для нормальной работы слайдшоу просто необходимо по порядку вставить HTML код.

<div class="img-holder">
    <img src="images/pic01.jpg" alt="" class="active" />
    <img src="images/pic02.jpg" alt="" />
    <img src="images/pic03.jpg" alt="" />
</div>
<ul>
    <li><a href="#"><img src="images/pic01-small.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/pic02-small.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/pic03-small.jpg" alt="" /></a></li>
</ul>

Подключение и настройка плагина

Для работы плагина необходимо подключить два скрипта, файл основной библиотеки jQuery (начиная с версии 1.2.*), скрипт jquery.slideShow, а также сделать инициализацию плагина.

<script type="text/javascript" src="js/jquery-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.slideShow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // инициализация плагина при загрузки DOM документа
    $('.gallery').slideShow({
        slideEl:'div.img-hold img',
        linkNext:'a.next',
        linkPrev:'a.prev',
        linkPause:'a.pause',
        numElement:'div.nav li a',
        duration:500,
        autoSlideShow:false,
        switchTime:3000,
        noCicle:false,
        disableClass:'no-active',
        event:'click',
        currentEl:'#footer span.cur',
        allEl:'#footer span.all'
    });
});
</script>
  • $(‘.gallery’).slideShow() – в качестве главного объекта, для слайдшоу, указывается селектор главного родителя
  • galleryEl – параметр в который передается селектор слайда
  • linkNext – селектор для кнопки “Next”
  • linkPrev – селектор для кнопки “Previos”
  • linkPause – селектор для кнопки “Pause/Play”
  • numElementLink – селектор навигации по слайдам
  • duration – время fade эффекта (1000 – 1сек)
  • autoSlideShow – Булево значение, которое включает autoslide
  • switchTime – время переключения между слайдами (1000 – 1сек)
  • noCicle – отмена цикличного просмотра
  • disableClass – класс для неактивного Prev/Next, связан с noCicle
  • event – событие для навигации по слайдам
  • currentEl – селектор элемента вывода текущего слайда
  • allEl – селектор вывода общего количества слайдов

Примеры использования плагина для различных вариаций HTML кода

Пример №2 – обычное слайдшоу с подписями

    $('.gallery2').slideShow({
        slideEl:'.img-holder li',
        duration:1000,
        autoSlideShow:true,
        switchTime:5000
    });

Просмотреть пример в новом окне

Пример №3 – слайдшоу для новостей

    $('.gallery3').slideShow({
        slideEl:'.img-holder li',
        linkNext:'a.next',
        linkPrev:'a.prev',
        numElement:'ul.news-list a',
        duration:600,
        autoSlideShow:true,
        switchTime:10000
    });

Просмотреть пример в новом окне

Из данных примеров можно сделать вывод – данный плагин применим для любого HTML кода… все зависит от вашего воображения, а остальное легко настраивается.

Скачать плагин

Change log:

Последние изменения в плагине

Tags: , ,

Четверг, Февраль 5th, 2009 JS Plugins, JavaScript, jQuery

26 Коментариев to Слайдшоу

  • YOOO:
    14.01.2012 в 17:13

    Попробую

    • « Предыдущие комментарии

    Оставить сообщение

    Rotaban.ru - биржа банерной рекламы
    Видео курс - "JavaScript. Больше, чем просто сайт"

    Архивы