Слайдшоу

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

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

24 Коментариев 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

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

  • Igor:
    26.05.2010 в 17:05

    Скрипт отличный, проработанный, легко интегрируется, есть только маленькая проблема – непонятно как установить нужное количество картинок в нижнем списке (в данном случае 5), чтоб с прокруткой оставшихся.

  • Mish:
    01.06.2010 в 16:09

    если картинок(ну и thumbnailov) будет больше чем пять? как реализовать для thumbnailov галерею и автопромотку вслед за автослайдом?

  • Алексей:
    01.06.2010 в 16:44

    не совсем понятен вопрос…

    автослайд может работать постоянно если он включен в параметрах плагина, и он никак не зависит от каличества слайдов и сабнейлов к ним.

  • Mish:
    01.06.2010 в 18:56

    допустим у нас такой дизайн http://i060.radikal.ru/1006/07/41816c71eca8.jpg, как сделать чтобы при выборе последнего элемента в верхней галерее она автоматически прокручивалась вперед(ну или назад при нажатии на первый, если есть куда)

  • Алексей:
    02.06.2010 в 10:47

    :) данный плагин предназначит только для эффектов фейда для слайдов, на ней нужного вам эффекта добиться не удастся. Если вам нужна такая галерея пишите в личку

  • Юрий:
    03.06.2010 в 18:38

    При открывании в Е7, когда делаю уменьшение масштаба, нижний ряд пяти картинок “подлезает” под большую картинку. Это можно как-то подправить?

    А так плагин классный. Спасибо тебе, дружище!

  • Алексей:
    03.06.2010 в 21:04

    Это править нужно в верстке, а не в ДЖС

  • Сергей:
    21.06.2010 в 21:40

    Глубоко буду признателен если подскажете как запустить ваш скрипт на движке дата лайф мучаюсь два дня все перепробивал на простом хтмл работает а во на движке никак. Спасибо заранее

  • Алексей:
    22.06.2010 в 10:12

    Я не знаком с движком дата лайф, поэтому точно ответить на вопрос не могу. Советую лишь первым делом сделать noConflict… это на тот случай если движок пользуется другим js фреймворком. ли возможен вариант когда цмс юзает уже какую-либо версию фреймверка + вы подключаете еще одну, в этом случае также возможны ошибки.

  • Роман:
    01.12.2010 в 17:35

    Добрый день! Плагин – супер, заколебался искать нечто именно такое!!! Есть один вопрос: а как реализовать чтоб в Пример №3 – слайдшоу для новостей смена слайдов происходила не по клику, а по наведению мыши? Спасибо большое!

  • Алексей:
    02.12.2010 в 11:16

    event:’mouseover’

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

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

    Архивы