Все для создания и продвижения сайтов

Верстка, программирование, SEO

Настройка Lightbox

количество просмотров 5821
Настройка 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. Пример:

    Image
    

Для группы картинок

Для группового использования картинок просто напишите значения атрибута data-lightbox одинаковым. Пример:

   Image 1
   Image 2
   Image 3

На подобе плагина Lightbox есть и ещё замечательный плагин, который имеет более гибкие настройки, читайте в статье - Настройка FancyBox.

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.