Лайтбокс эффект на jQuery

Библиотека jQuery обладает массой возможностей в области оформления и управления элементами. Давайте на простом примере разберем, как реализовать плавно появляющийся блок в Lightbox (лайтбокс эффект) с помощью jQuery.

Как это работает?

Для начала необходимо сформировать HTML-содержимое страницы:

Из кода мы видим, что у нас есть ссылка <a href=»#» class=»open»></a>, нажав на которую появляется блок с нашим содержимым <div class=»lightbox»></div>. При появлении этого блока, область сайта затемняется при помощи заданного в самом начале блока <div class=»overlay»></div>. В нашем блоке также имеется ссылка <a href=»#» class=»close»></a>, при нажатии на эту ссылку или же в любом пустом месте вне нашего блока, окно Lightbox закроется.

Перейдем к оформлению окна Lightbox. В коде ниже отмечены свойства display: none; для блоков с классами .overlay и .lightbox, это необходимо для того, чтобы на начальном этапе при открытии страницы блок с нашим содержимым, а также блок затенения были скрыты. Блоку с классом .overlay зададим фиксированную позицию от левого верхнего угла, чтобы этот блок был полупрозрачным, добавим свойство opacity: 0.8

И последнее, что нам необходимо для полноценного функционирования окна Lightbox — это добавить скрипт обработки событий

Разберем подробнее, что мы делаем:

jQuery(‘.lightbox’).css({ — добавляем CSS-свойства в lightbox элемент, устанавливаем фиксированную позицию по центру, даже во время прокрутки, а также устанавливаем отступ margin в соответствии с шириной и высотой lightbox элемента. Всё это позволит нам зафиксировать блок с нашим содержимым в центре даже во время прокрутки.

jQuery(‘a.open’).click(function(e) { — с помощью этой функции мы отображаем lightbox элемент и маску с угасания. Устанавливаем скорость затемнения и угасания 800, Вы можете сделать это быстрее или медленнее за счет уменьшения или увеличения значения соответственно.

jQuery(‘a.close, .overlay’).click(function(e) { — данной функцией мы просто скрываем lightbox элемент и наложения элементов при помощи FadeOut, в случае, если мышка была нажата или на ссылку закрытия окна Lightbox.

Таким простым способом мы создали лайтбокс эффект на jQuery.

Вы можете скачать пример работы данного скрипта из вложения в конце статьи.

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

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
5,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.