- Метки урока:
- jquery
- галерея
- изображения
Легковесный плагин для создания галереи
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"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.