Слайдшоу

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

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


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

  • Daniel:
    01.05.2009 в 18:49

    Привет, а первый пример не работает то.И не очень удобно что для всех примеров цсс один(файл), для неразбирающихся труднее разобраться , что к чему относиться =)

  • Алексей:
    01.05.2009 в 19:23

    Да, действительно…..
    открыв файл увидел что код поломался, видимо когда обновлял через FTP клиент, что то пошло не так.
    Спасибо за замечание, все исправил.

  • alex:
    27.06.2009 в 21:08

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

  • Алексей:
    28.06.2009 в 00:23

    не совсем понятно что вы имеете ввиду….
    Если у вас есть html элемент в котором лежат картинки достаточно сделать такие настройки:

    $(document).ready(function(){
        $('.селектор_вашего_элемента').slideShow({
            slideEl:'img',
            duration:500,
            autoSlideShow:true,
            switchTime:3000
        });
    });
  • Вадик:
    01.07.2009 в 23:24

    FYI
    - фотки бывают разного размера.
    - фотки бывают как гор. так и вертикальные.
    а у тебя это не предусмотрено.

    Но в целом довольно неплохо, спасибо, если будет время переделаю его под свои нужды!

  • Алексей:
    04.07.2009 в 19:54

    простите за ламерский вопрос, но у меня почему-то следующая картинка сначала отображается ниже, потом поднимается наверх :((
    Не подскажете в чем дело ?

  • Алексей:
    05.07.2009 в 14:55

    Поставте на первый элемент класс “active” (slideEl:’img’)

    А в свойствах пропишите например:
    .gallery img {z-index:0;}
    .gallery img.active {z-index:1;}

  • Viko:
    29.07.2009 в 16:11

    скажите пжалуста, как бы решить проблему для полупрозрачных картинок в осле(IE7-8)

  • Алексей:
    29.07.2009 в 16:20

    боюсь что нормальную галерею через fade эффект с полупрозрачными картинками для ИЕ вы не сделаете….
    у IE7/8 появляется черный фон при анимации.

  • YaR:
    06.10.2009 в 14:41

    Автор молодчага!!! Просто супер, те, кто тут гонят, не обращай внимания!!! Твой скрипт просто супер, результат своих мук и трудов можешь просмотреть у меня на сайте (www.quad-damage.at.ua) на вкладке сервера (Servers) (www.quad-damage.at.ua/index0-11). Насколько я понял Вы еще и украинец – если это так, то мне невероятно приятно, что те 5 вариантов, которые я перепробовал не работают, а наш – работает! Большое спасибо!!! =)

  • serge che:
    29.11.2009 в 19:43

    Скажите, пожалуйста, как бы вместо текста
    “Новость №…” сделать сменяющуюся картинку
    для соответствующей активной и неактивной картинки слева.
    Т.е. для активной (видимой в данный момент)картинки – одна (gif-картинка с номером на светлом фоне), для невидимой – другая (gif-картинка с номером на темном фоне).
    Заранее спасибо за ответ.
    С уважнием

  • Алексей:
    30.11.2009 в 11:24

    Все очень просто, вместо текста вставьте картинку, на активную li списка картинок ставится класс “active” – в зависимости от этого класса изменяйте вид картинки.

  • Leolik:
    18.12.2009 в 16:22

    Спасибо огромное за скрипт, уже не первый раз выручает!

    • 
    Rotaban.ru - биржа банерной рекламы