Легковесный плагин для создания галереи

demosourse

lightGallery - это легко настраиваемый jQuery плагин для создания адаптивной галереи.

Основные фишки плагина

  • Полная адаптивность.
  • Модульная архитектура.
  • Поддержка жестов мобильных устройств.
  • Поддержка события “кликай и тяни” для ПК.
  • Анимированные миниатюры.
  • Поддержка видео от Youtube, Vimeo и html5.
  • Поддержка 20+ CSS3 переходов.
  • Динамический режим.
  • Поддержка полноэкранного режима.
  • Поддержка зума.
  • API истории браузера.
  • Адаптивные изображения.
  • Поддержка HTML iframe.
  • Множество галерей на одной странице.
  • Простая настройка под себя через CSS (SCSS) и Настройки.
  • Подгрузка изображений на ходу и оптимизация кода.
  • Навигация клавиатурой для ПК.
  • Поддержка иконочных шрифров.

Скачиваем плагин

Последнюю версию плагина можно скачать на github.

Подключение

Прежде всего необходимо добавить подключение файлов lightgallery.css в раздел <head>.

<head>
    <link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
</head>

Затем подключите jQuery и плагин lightgallery.min.js в конце тела документа.

<body>
    ....

    <!-- jQuery version must be >= 1.8.0; -->
    <script src="jquery.min.js"></script>
    <script src="js/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>

Разметка

lightgallery не заставляет вас придерживаться какой-то строгой разметки. Можете делать всё на своё усмотрение. Однако, советую вам придерживаться следующего варианта:

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

Вызов плагина

Далее инициируем плагин галереи:

<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery();
    });
</script>

Вот и всё. У нас есть рабочая галерея.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/sachinchoolur/lightGallery
Перевел: Станислав Протасевич
Урок создан: 3 Сентября 2015
Просмотров: 20912
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^