Lightbox - это JQuery-плагин, который используется для отображения изображения или любого другого контента в специально оформленном окне, которое показывается, как правило, на полупрозрачном затененном фоне поверх основного контента страницы.
Прежде чем устанавливать плагин на страницу и заниматься его настройкой, давайте взглянем на примеры:
Начало работы с Lightbox
Скачайте последнюю версию плагина (также доступна через Bower: bower install lightbox2 --save). После этого разархивируйте zip файл и загляните в урезанный рабочий пример, который находится в папке examples.
Готовые для установки Lightbox на вашей странице? Начните с подключения CSS и Javascript. Вы можете взять оба этих файла из папки dist. Вставьте следующий код между тегами head в вашей web-странице
<link href="path/to/lightbox.css" rel="stylesheet">
Следующий код, подключающий плагин, вставьте перед закрывающим тегом body:
<script src="path/to/lightbox.js"></script>
Убедитесь, что JQuery, который требуется Lightbox, также загружаются. Если вы уже используете JQuery (требуется JQuery 1.7 или выше) на странице, убедитесь, что он загружается до lightbox.js. Если у вас не подключена jQuery, воспользуйтель dist/js/lightbox-plus-jquery.js, в котором уже есть эта библиотека, либо скачайте последнюю версию с оф. сайта. Убедитесь, что четыре изображения, прописанные в lightbox.css расположени в указанном месте. Вы можете взять изображения из папки /dist/images.
Теперь займемся HTML-кодом. Добавьте атрибут data-lightbox к ссылке, содержащей изображения и к которым мы хотим применить наш плагин. В качествен значения атрибута используйте уникальное для каждого изображения имя. Например:
<a href="images/image-1.jpg"
data-lightbox="image-1"
data-title="Мой заголовок">Image #1</a>
Добавьте атрибут data-title, если вы хотите показать заголовок. Если у вас есть группа связанных изображений, которые вы хотели бы объединить в набор, используйте одинаковое значение в атрибуте data-lightbox для требуемых изображений. Например:
<a href="img2.jpg" data-lightbox="roadtr">Img 2</a>
<a href="img3.jpg" data-lightbox="roadtr">Img 3</a>
<a href="img4.jpg" data-lightbox="roadtr">Img 4</a>
Настройки Lightbox
Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод option:.
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>