Работа со скриптами. Урок 22. Всплывающая галерея
Скрипт позволяет создавать галерею фото, которые при клике увеличиваются во весь экран и можно дальше листать уже увеличенные фото
Demo http://sachinchoolur.github.io/lightGallery/
Скрипт https://github.com/sachinchoolur/lightGallery
Подключение стилей
<link rel="stylesheet" href="bower_components/lightgallery/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="bower_components/lightgallery/dist/css/lg-transitions.min.css">
Подключение скрипта
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lightgallery.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lg-thumbnail.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lg-fullscreen.min.js"></script>
<script src="js/custom.js"></script>
Особенность подключения галереи в том, что она состоит из многих плагинов, каждый из который отвечает за какую-то функцию. Если такие функции вам не нужны, то и плагины подключать не нужно. Здесь кроме основного файла lightgallery.min.js и кроме jquery, без которого галерея работать не будет, подключены также lg-thumbnail.min.js отвечающий за превью показываемых фото внизу галереи, и lg-fullscreen.min.js, обеспечивающий разворачивание фото в полный экран.
Пример разметки
<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>
Галерея получает id="lightgallery", внутри ссылки размещаем большое фото, а в теге img - превью.
Инициализация галереи в custom.js
$(function() {
$("#js-lightgallery").lightGallery({
mode: "lg-slide-skew-rev", // эффект переключения слайдов, посмотреть разные эффекты и выбрать нужный можно здесь http://sachinchoolur.github.io/lightGallery/demos/transitions.html
download: false, // картинку нельзя сохранить на компьютер
thumbContHeight: 50 // высота миниатюр, по умолчанию их размеры 100х100
});
});
Относительно подписей к фото, способы их добавить рассматриваются здесь
Достаточно удобный вариант - сделать подписи отдельными блоками с id= caption1, caption2, caption3 и т.д, а в ссылках эти id указать в виде data-атрибутов
Пример:
<div id="caption2" style="display:none">
<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>
</div>
<a href="http://placehold.it/700x500" data-sub-html="#caption2">
<img src="http://placehold.it/100x50" alt="">
</a>
Demo http://sachinchoolur.github.io/lightGallery/
Скрипт https://github.com/sachinchoolur/lightGallery
Подключение стилей
<link rel="stylesheet" href="bower_components/lightgallery/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="bower_components/lightgallery/dist/css/lg-transitions.min.css">
Подключение скрипта
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lightgallery.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lg-thumbnail.min.js"></script>
<script src="bower_components/lightgallery/dist/js/lg-fullscreen.min.js"></script>
<script src="js/custom.js"></script>
Особенность подключения галереи в том, что она состоит из многих плагинов, каждый из который отвечает за какую-то функцию. Если такие функции вам не нужны, то и плагины подключать не нужно. Здесь кроме основного файла lightgallery.min.js и кроме jquery, без которого галерея работать не будет, подключены также lg-thumbnail.min.js отвечающий за превью показываемых фото внизу галереи, и lg-fullscreen.min.js, обеспечивающий разворачивание фото в полный экран.
Пример разметки
<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>
Галерея получает id="lightgallery", внутри ссылки размещаем большое фото, а в теге img - превью.
Инициализация галереи в custom.js
$(function() {
$("#js-lightgallery").lightGallery({
mode: "lg-slide-skew-rev", // эффект переключения слайдов, посмотреть разные эффекты и выбрать нужный можно здесь http://sachinchoolur.github.io/lightGallery/demos/transitions.html
download: false, // картинку нельзя сохранить на компьютер
thumbContHeight: 50 // высота миниатюр, по умолчанию их размеры 100х100
});
});
Относительно подписей к фото, способы их добавить рассматриваются здесь
Достаточно удобный вариант - сделать подписи отдельными блоками с id= caption1, caption2, caption3 и т.д, а в ссылках эти id указать в виде data-атрибутов
Пример:
<div id="caption2" style="display:none">
<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>
</div>
<a href="http://placehold.it/700x500" data-sub-html="#caption2">
<img src="http://placehold.it/100x50" alt="">
</a>