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

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

Сегодня я собираюсь поделиться с вами простым, но симпатичным jQuery-плагином для создания галереи. Галерея адаптивна и использует 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
  });
});

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

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

Проект на GitHub


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments