jQuery-плагин для создания слайд-шоу

Хорошая фотография проходит долгий путь, прежде чем стать выдающимся элементом дизайна. Но порой одного изображения не достаточно, и требуется создать плавное слайд-шоу из нескольких картинок, чтобы завладеть вниманием пользователя и привнести в дизайн динамику.

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

ДЕМОНСТРАЦИЯ

СКАЧАТЬ

jQuery-плагин

Как это работает

Очень просто! Сначала, нужно привычным способом вставить изображение в HTML-код.

После этого, следует добавить атрибут data-slideshow и задать в качестве его значения пути к изображениям, которые будут использоваться в слайд-шоу:

<img src="...." data-slideshow="img1.jpg|img2.jpg|img3.jpg" />

Все, что осталось, это подключить плагин к странице и вызвать метод slideShow()!

Разбор исходного кода

Плагин состоит из файла стилей и файла с Javascript-кодом.

Давайте начнем с .js-файла.

assets/jQuery-slideshow-plugin/plugin.js

В нем находится код типичного jQuery-плагина. Для начала, мы определяем стандартные опции:

options = $.extend({     timeOut: 3000, // как долго каждая картинка остается на экране
showNavigation: true, // кнопки показа следующего/предыдущего изображения
pauseOnHover: true, // пауза, когда на изображение наводится курсор мыши
swipeNavigation: true // поддержка жестов
}, options);

Идея заключается в том, чтобы брать пути к картинкам из значения атрибута data-slideshow и вставлять их в тег <div> в качестве фонового изображения.

Этот <div> имеет размеры оригинального изображения и, после того как все картинки собраны (включая первую), фоновое изображение контейнера заменяется.

Давайте взглянем на код, реализующий данный алгоритм:

// Переменные
var intervals = [],
    slideshowImgs = [],
    originalSrc,
    img,
    cont,
    width,
    height,

// Создаем объект со всеми элементами, указанными в атрибуте 'data-slideshow' 

container = this.filter(function () {
    return $(this).data('slideshow');
});

// Циклический проход по всем элементам объекта container
// Далее мы будем использовать переменную "i" для того, чтобы различать отдельные изображения, участвующие в слайд-шоу

for (var i = 0; i < container.length; i++) {

    cont = $(container[i]);

    width = container.eq(i).outerWidth(true);
    height = container.eq(i).outerHeight(true);

    // Для каждого отдельного элемента слайд-шоу, создаем вспомогательный контейнер <div>, имеющий уникальный ID.
    // В этих контейнерах мы будем хранить изображения для слайд-шоу.

    var helpdiv = $('<div id="slideshow-container-' + i + '" class="slideshow" >');

    helpdiv.height(height);
    helpdiv.width(width);

    // Если данная опция активирована, вызываем функцию, которая показывает кнопки

    if (options.showNavigation) {
        createNavigation();
    }

    // Помещаем оригинальные изображения в <div>`ы

    originalSrc = cont.attr('src');
    img = $('<div class="slide" style="background-image: url(' + originalSrc + ')">');
    img.appendTo(helpdiv);

    // Берем значения из атрибута data-slideshow

    slideshowImgs[i] = cont.attr('data-slideshow').split("|");

    for (var j = 0; j < slideshowImgs[i].length; j++) {

        img = $('<div class="slide" style="background-image: url(' + slideshowImgs[i][j] + ')">');
        img.appendTo(helpdiv);

    }

    // Заменяем оригинальный элемент созданным контенером <div>

    cont.replaceWith(helpdiv);

    // Активируем слайд-шоу

    automaticSlide(i)

}

После активации изображения начинают поочередно плавно сменять друг друга. В зависимости от настроек мы также можем управлять слайд-шоу кликами и наведением.

Благодаря hammer.js также возможно перелистывать картинки.

Давайте посмотрим на код, реализующий данную функцию:

// Автоматический режим слайд-шоу

function automaticSlide(index) {

    // Скрыть все изображения, за исключением первого
    $('#slideshow-container-' + index + ' .slide:gt(0)').hide();

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

    intervals[index] = setInterval(function () {
            $('#slideshow-container-' + index + ' .slide:first').fadeOut("slow")
                .next('.slide').fadeIn("slow")
                .end().appendTo('#slideshow-container-' + index + '');
        },
        options.timeOut);
}

// Пауза при наведении курсора мыши и повторная активация при его убирании со слайдера

if (options.pauseOnHover) {
    (function hoverPause() {
        $('.slideshow').on({
            'mouseenter.hover': function () {
                clearInterval(intervals[($(this).attr('id').split('-')[2])])
            },
            'mouseleave.hover': function () {
                automaticSlide($(this).attr('id').split('-')[2])
            }
        });
    })()
}

// Мы используем этот код, чтобы предотвратить возвращение слайд-шоу к началу после остановки

function hoverStop(id) {
    $('#' + id + '').off('mouseenter.hover mouseleave.hover');
}

// Создание кнопок навигации

function createNavigation() {

    // Сами кнопки
    var leftArrow = $('<div class="leftBtn slideBtn hide">');
    var rightArrow = $('<div class="rightBtn slideBtn hide">');

    // Стрелки для кнопок
    var nextPointer = $('<span class="pointer next"></span>');
    var prevPointer = $('<span class="pointer previous"></span>');

    prevPointer.appendTo(leftArrow);
    nextPointer.appendTo(rightArrow);

    leftArrow.appendTo(helpdiv);
    rightArrow.appendTo(helpdiv);
}

// Ручной режим слайд-шоу

if (options.showNavigation) {

// Этот код показывает навигацию, только когда курсор мыши оказывается над слайдером
// и скрывает её, когда он оттуда исчезает

    $('.slideshow').on({
        'mouseenter': function () {
            $(this).find('.leftBtn, .rightBtn').removeClass('hide')
        },
        'mouseleave': function () {
            $(this).find('.leftBtn, .rightBtn').addClass('hide')
        }
    });

    // При клике останавливаем автоматическое перелистывание слайд-шоу и меняем слайд

    $('.leftBtn').on('click', function () {

        // Очищаем соответствующий интервал, чтобы остановить слайд-шоу
        //  (интервалы являются массивом, поэтому мы даем им идентификатор контейнера для слайд-шоу)
        clearInterval(intervals[($(this).parent().attr('id').split('-')[2])]);

        // Делаем видимым последнее изображение и устанавливаем его в качестве первого в контейнере со слайд-шоу

        $(this).parent().find('.slide:last').fadeIn("slow")
            .insertBefore($(this).parent().find('.slide:first').fadeOut("slow"));

        hoverStop($(this).parent().attr('id'));
    });

    $('.rightBtn').on('click', function () {

        // Очищаем соответствующий интервал , чтобы остановить слайд-шоу
        clearInterval(intervals[($(this).parent().attr('id').split('-')[2])]);

        // Включаем затухание текущего изображения и прикрепляем его к родительскому элементу, делая картинку последней
        // Плавно показываем следующее изображение

        $(this).parent().find('.slide:first').fadeOut("slow")
            .next('.slide').fadeIn("slow")
            .end().appendTo($(this).parent());

        hoverStop($(this).parent().attr('id'));
    });
}

// Меняем слайд при перелистывании

// То же самое, что и функция 'on click', но на этот раз мы используем hammer.js

if (options.swipeNavigation) {
    $('.slideshow').hammer().on({
        "swiperight": function () {
            clearInterval(intervals[($(this).attr('id').split('-')[2])]);

            $(this).find('.slide:last').fadeIn("slow")
                .insertBefore($(this).find('.slide:first').fadeOut("slow"))

        },
        "swipeleft": function () {
            clearInterval(intervals[($(this).attr('id').split('-')[2])]);

            $(this).find('.slide:first').fadeOut("slow")
                .next('.slide').fadeIn("slow")
                .end().appendTo($(this));
        }
    })
}

Наконец, давайте обзорно взглянем на CSS файл, находящийся по адресу assets/jQuery-slideshow-plugin/plugin.css.

Мы хотим, чтобы все изображения для нашего слайд-шоу находились одно над другим, поэтому мы зададим для них класс “sliding”.

Это также позволит им растянуться до размеров родительского контейнера <div>:

.sliding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

Затем установим свойство z-index в значение 10 для кнопок, чтобы они оказались выше всех остальных элементов:

.slideBtn {
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 100%;
    cursor: pointer;
}

.leftBtn {
    left: 0px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.rightBtn {
    right: 0px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

И наконец, создадим стрелки слева и справа на слайдере и поместим их на самую вершину с помощью установки свойства «z-index:9001»:

.pointer {
    position: absolute;
    top: 50%;
    margin-top: -32px;
    z-index: 9001;
    left: 12px;
    opacity: 0.8;
}

.previous {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid white;

}

.next {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid white;
    right: 12px;
    left: auto;
}

Использование плагина

Чтобы использовать плагин, подключите файлы по адресам: assets/jQuery-slideshow-plugin/plugin.css и assets/jQuery-slideshow-plugin/plugin.js в секции <head> вашей страницы после подключения библиотек jQuery и Hammer.js.

Для инициализации плагина нужно прописать следующий код и настроить его по своему усмотрению:

(function ($) {
$('#activate').on('click', function () {
    $('img').slideShow({
        timeOut: 2000,
        showNavigation: true,
        pauseOnHover: true,
        swipeNavigation: true
    });
}(jQuery));

Готово!

На этом мы заканчиваем статью. Надеемся, что у вас получилось запустить плагин. Мы приложили все усилия, чтобы это было максимально просто при сохранении нужной функциональности. Оставляйте свои комментарии ниже!

Перевод статьи «jQuery Image Slideshow Plugin» был подготовлен дружной командой проекта Сайтостроение от А до Я.