S Gallery - адаптивная галерея с CSS3-анимацией

Плагин использует FullScreen API HTML5, и в значительной мере основан на CSS3-transforms, поэтому он будет работать только в браузерах, поддерживающих эти возможности.

Разметка

Необходимая разметка для плагина проста: два маркированных списка, первый для превью изображений, а второй для больших версий изображений, они расположены в контейнере, которому задан идентификатор #gallery-container.

Еще одна вещь необходима в разметке: панель управления. Элементы управления используются для управления слайдшоу и переходов между изображениями.

<div id="gallery-container">
    <ul class="items--small">
        <li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
        <li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
        <!--.....-->
    </ul>
    <ul class="items--big">
        <li class="item--big">
            <a href="#">
                <figure>
                    <img src="images/big-1.jpg" alt="" />
                    <figcaption class="img-caption">
                        Caption
                    </figcaption>
                </figure>
            </a>
        </li>
        <li class="item--big">
            <a href="#">
                <figure>
                    <img src="images/big-2.jpg" alt="" />
                    <figcaption class="img-caption">
                        Caption
                    </figcaption>
                </figure>
            </a>
        </li>
        <!--...-->
    </ul>
    <div class="controls">
        <span class="control icon-arrow-left" data-direction="previous"></span>
        <span class="control icon-arrow-right" data-direction="next"></span>
        <span class="grid icon-grid"></span>
        <span class="fs-toggle icon-fullscreen"></span>
    </div>
</div>

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

Зависимости

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

Ссылка на таблицу стилей в теге head вашей страницы.

<link rel="stylesheet" href="path-to-stylesheets/styles.css" />

Ссылка на jQuery из CDN и скрипт плагина в нижней части страницы, сразу перед закрывающим тегом body:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="path-to-your-js-scripts/scripts.js"></script>

В целях оптимизации галереи для мобильных устройств, был добавлен hammer.js в скрипт под названием plugins.js, который также включает Screenfull.js от Sindre Sorhus, который является "просто оберткой для использования кросс-браузерного JavaScript Fullscreen API" .

У вас есть возможность добавить поддержку полноэкранного режима в галерею, это можно указать в параметрах при вызове плагина (подробнее об этом ниже).

Ссылка на plugins.js, перед ссылкой на scripts.js:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="path-to-your-js-scripts/plugins.js"></script>
<script src="path-to-your-js-scripts/scripts.js"></script>

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

Вызов плагина очень прост. Опция FullScreenEnabled по умолчанию установлена ​​как false, вы можете включить этот параметр, чтобы добавить поддержку полноэкранного режима, установив его как true:

$(document).ready(function() {
    $('#gallery-container').sGallery({
        fullScreenEnabled: true //default is false
    });
});

И вот и всё. Я надеюсь, вам понравился этот плагин и Вы найдете его полезным!