Лайтбокс эффект на jQuery
Библиотека jQuery обладает массой возможностей в области оформления и управления элементами. Давайте на простом примере разберем, как реализовать плавно появляющийся блок в Lightbox (лайтбокс эффект) с помощью jQuery.
Как это работает?
Для начала необходимо сформировать HTML-содержимое страницы:
|
1 2 3 4 5 6 7 |
<div class="overlay"></div> <div class="lightbox"> <h3>Lightbox эффект</h3> <a href="#" class="close"><img src="/close.png" alt="Закрыть" /></a> <p>Lightbox открыт. Здесь Вы можете увидеть содержимое Вашего блока.</p> </div> <a href="#" class="open">Открыть Lightbox</a> |
Из кода мы видим, что у нас есть ссылка <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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; opacity: 0.8; } .lightbox { display: none; width: 500px; padding: 25px; background: #ffffff; box-shadow: 0 0 25px #111111; -moz-box-shadow: 0 0 25px #111111; -webkit-box-shadow: 0 0 25px #111111; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; z-index: 99; } a.close { position: absolute; top: 15px; right: 15px; } |
И последнее, что нам необходимо для полноценного функционирования окна Lightbox — это добавить скрипт обработки событий
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(document).ready(function () { //Установить lightbox позицию в центре экрана jQuery('.lightbox').css({ position: 'fixed', top:'50%', left:'50%', margin:'-'+(jQuery('.lightbox').height() / 2)+'px 0 0 -'+(jQuery('.lightbox').width() / 2)+'px' }); // Показать lightbox маску, если нажатия на ссылку jQuery('a.open').click(function(e) { e.preventDefault(); jQuery('.lightbox').fadeIn(800); jQuery('.overlay').fadeIn(800); }); // Скрыть lightbox и маску, если мышка нажата вне блока jQuery('a.close, .overlay').click(function(e) { e.preventDefault(); jQuery('.lightbox').fadeOut(800); jQuery('.overlay').fadeOut(800); }); }); |
Разберем подробнее, что мы делаем:
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.
Вы можете скачать пример работы данного скрипта из вложения в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.