jQuery lightGallery – очень впечатляющая фото галерея для любого сайта. Данный jQuery плагин фотогалереи пригодится всем любителям показать фотографии на любой странице, которую можно отредактировать (свой сайт или же обычная html страница).
Для того, чтобы данная штучка заработала, необходимо прикрепить к Вашей странице или сайту, где хотите отображать эту фотогалерею следующие JS файлы. Если jQuery уже есть в коде страницы, то первый пункт пропустите. НО в зависимости от версии jQuery, необходимо тестировать ВСЕ функции, которые есть у галереи для фотографий на сайт.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Сам плагин состоит дополнительно из нескольких файлов. При этом, стоит отметить, что в нем доступны функции:
- swipe действий с мобильных или планшетов
- прокрутки колеса мыши
- управление с клавиатуры
- увеличение изображений
- загрузка изображений
- разворот на весь экран
- автоматическая прокрутка слайдов
- миниатюры внизу
- дополнительная информация о каждом фото
- меняет адресную строку и запоминает где Вы остановились просматривать с её помощью
Также Вам необходимо будет подключить JS файлы:
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="/../dist/js/lightgallery.js"></script>
<script src="/../dist/js/lg-fullscreen.js"></script>
<script src="/../dist/js/lg-thumbnail.js"></script>
<script src="/../dist/js/lg-video.js"></script>
<script src="/../dist/js/lg-autoplay.js"></script>
<script src="/../dist/js/lg-zoom.js"></script>
<script src="/../dist/js/lg-hash.js"></script>
<script src="/../dist/js/lg-pager.js"></script>
<script src="/../lib/jquery.mousewheel.min.js"></script>
Если первый вдруг не будет доступен, то Вы сможете найти его найти в архиве и загрузить на сервер (соответственно изменив путь к нему в коде).
Этот код также необходимо оставить на странице или добавить в подключенный JS файл:
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
Где идентификатор lightgallery является тем, к которому будет подключена галерея.
HTML:
<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>
Файл стилей [CSS]:
<link href="../dist/css/lightgallery.css" rel="stylesheet">
