Уфа

ул. Лесной проезд 6/5,

Офис 6.

+7 (906) 102-95-68

ул. Лесной проезд 6/5, Офис 6.

tel
Главная Стрелка вправо Блог Стрелка вправо Litebox для сайта.

Litebox для сайта.

Скачать Plugin liteBox

Адаптивный и универсальный litebox пригодится на любом сайте и в этой статье мы разберем как его реализовать. Плагин для jQuery «LiteBox» поможет нам в этом.

Основные особенности LiteBox

  • Использование в качестве контента любой html. В том числе и картинки, видео, фреймы, канвас и тд.
  • Полноэкранный просмотр.
  • Объединение контента в группы для поочередного просмотра в полноэкранном режиме.
  • Автоматическую подстройку под размер Вашего экрана.

Итак начнем. Для начала нам нужно пойти на страницу плагина и скачать его. После распаковки архива интересующие нас файлы будут лежать в папке "assets".

Далее создадим в папке плагина рядом с index.html свой файл my_litebox.html, в котором и будем реализовывать наш litebox.

Базовую разметку страницы я опущу.

Для начала подключим в него необходимые файлы, для этого между тегами <head>...</head> пропишем следующее:

Так же создадим базовую разметку для нашего litebox. для этого между тегами <body>...</body> напишем следующее:

В данной базовой разметке мы в невидимый блок добавили миниатюры картинок обернутые в ссылки , в атрибуте href которых прописан путь до большого изображения. Атрибут target="_self" нужен для того, чтобы восстановить у ссылки поведение по умолчанию(открывать ссылки в текущем окне).

Класс «litebox» у ссылки в данном случае нужен лишь для того, чтобы выбрать эти элементы с помощью jQery.

Для того чтобы наш litebox заработал нужно написать еще несколько строчек кода на javascript:

Если вы планируете разбить картинки по группам, чтобы можно было просматривать картинки в этой группе не закрывая всплывающее окно litebox, то в ссылках на большие изображения нужно дописать атрибут «data-litebox-group” значение которого будет одинаковым для группы изображений. Например изменим нашу базовую верстку:

Плагин liteBox автоматически определит что Ваши картинки организованы в группу и позволит просматривать их не закрывая всплывающее окно.

Наш litebox изображений готов.

Для использования в качестве контента любой html, включая видео, фреймы других сайтов и т. д. Необходимо написать вот такую верстку:

Для фрейма другого сайта:

Для видео с ютуба:

Для произвольного html кода:

- Наша кнопка для вызова окна:

где href="#inline-html-1" это указатель на наш всплывающий блок.

Обратите внимание на то, что код вcплывающего окна находится на блоке у которого установлен display: none. Так же стоит отметить то, что атрибут href у нашей ссылки совпадает с атрибутом id всплывающего окна.

Не забывайте для ссылки прописать javascript:

Так же можете вызывать данный метод с параметрами. Например давайте зададим скорость появления и исчезновения litebox и зададим фоновый цвет:

По сути механизм работы плагина заключается в следующем: он берет содержимое нашего всплывающего окна, копирует его и вставляет перед открывающим , а при закрытии удаляет, этот созданный блок.


Весь список настроек плагина liteBox: