Настройка Lightbox

В этой статье мы рассмотрим, как устанавливать и настраивать Lightbox для сайта.

Lightbox - это плагин на jquery, который открывает изображения на весь экран при нажатии и выводит кнопки: "далее" и "назад", а также название и описание фотографии.

1. Для начала скачаем Lightbox последний версии с официального сайта - официальный сайт Lightbox или скачаем по прямой ссылке. И загрузим файлы к себе на сайт.

Скачать Lightbox 2.7.1

2. Добавим между тегами head файлы js плагина и если нет, то и Jquery. А также перед скриптами добавим файл стилей css

<head>
   <link href="css/lightbox.css" rel="stylesheet" />
   <script src="js/jquery-1.11.0.min.js"></script>
   <script src="js/lightbox.min.js"></script>
</head>

3. Теперь нужно добавить изображения плагина, папку img скопируйте в корень папки, где лежит файл стилей. К примеру, если у вас файлы css лежат по адресу site/css/lightbox.css, то изображения должны соответствовать - site/img/close.png.

Если сделали все верно, то плагин подключен.

Настройка и использование

Простое использование.

Если хотите вызвать просто на одной картинке или при нажатии на текст, то добавьте атрибут data-lightbox. Пример: