mail_outline menu

PhotoSwipe галерея и Jquery слайдер

double_arrow

Демонстрация

HTML код

<section id="gal" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <button class="prevslide">&#10094;</button>
    <button class="nextslide">&#10095;</button>

    <div class="slides">

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="https://live.staticflickr.com/7831/40179928753_1c4ec15b6a_o.jpg" itemprop="contentUrl" data-size="0x0">
                <img src="https://live.staticflickr.com/7831/40179928753_1c4ec15b6a_o.jpg" itemprop="thumbnail" alt="" />
            </a>
            <figcaption itemprop="caption description">Описание к первой картинке</figcaption>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="https://live.staticflickr.com/7807/46648239861_8c0d189903_o.jpg" itemprop="contentUrl" data-size="0x0">
                <img src="https://live.staticflickr.com/7807/46648239861_8c0d189903_o.jpg" itemprop="thumbnail" alt="" />
            </a>
            <figcaption itemprop="caption description">Описание ко второй картинке</figcaption>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="https://live.staticflickr.com/7814/32203398007_78dd86749e_o.jpg" itemprop="contentUrl" data-size="0x0">
                <img src="https://live.staticflickr.com/7814/32203398007_78dd86749e_o.jpg" itemprop="thumbnail" alt="" />
            </a>
            <figcaption itemprop="caption description">Описание к третьей картинке</figcaption>
        </figure>

    </div>
</section>

CSS код слайдера

.gallery {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 20px 0;
    clear: both;
}


.gallery a,.nolink {
    box-shadow: none;
    margin: 0;
    display: block;
}

.gallery a:hover,.nolink:hover {
    background: none;
    margin: 0;
    padding: 0;
}

.slides img {
    width: 100%;
}

.gallery button {
    padding: 5px 15px;
    font-size: 150%;
    margin-bottom: 10px;
    background: #d9d9d9;
}

.gallery button:hover {
    background: #f2f2f2;
}

.gallery button:active {
    background: #fff;
}

.prevslide {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.nextslide {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.activeslide {
    display:block;
}

CSS код PhotoSwipe

photoswipe.css (закомментирована анимация)

Jquery код слайдера

$(function() {

    $(".slides").each(function() {
        var Gallery = $('#'+$(this).parent().attr('id'));

        $(Gallery).find('figure').first().addClass('activeslide');
        $(Gallery).find('figure').hide();
        $(Gallery).find('.activeslide').show();
    });



    $('.nextslide').click(function() {
        var Gallery = $('#'+$(this).parent().attr('id'));

        $(Gallery).find('.activeslide').removeClass('activeslide').addClass('oldactive');

        if ($(Gallery).find('.oldactive').is(':last-child')) {
            $(Gallery).find('figure').first().addClass('activeslide');
        }
        else {
            $(Gallery).find('.oldactive').next().addClass('activeslide');
        }

        $(Gallery).find('.oldactive').removeClass('oldactive');
        $(Gallery).find('figure').hide();
        $(Gallery).find('.activeslide').show();
    });



    $('.prevslide').click(function() {
        var Gallery = $('#'+$(this).parent().attr('id'));

        $(Gallery).find('.activeslide').removeClass('activeslide').addClass('oldactive');

        if ($(Gallery).find('.oldactive').is(':first-child')) {
            $(Gallery).find('figure').last().addClass('activeslide');
        }
        else {
            $(Gallery).find('.oldactive').prev().addClass('activeslide');
        }

        $(Gallery).find('.oldactive').removeClass('oldactive');
        $(Gallery).find('figure').hide();
        $(Gallery).find('.activeslide').show();
    });
});

Jquery код PhotoSwipe

photoswipe.js (убраны некоторые кнопки, отключена history, добавлена возможность не указывать явный размер изображения - data-size="0x0")

Иконки PhotoSwipe

photoswipe.png, photoswipe.gif, photoswipe.svg

Документация PhotoSwipe

photoswipe.com