ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание простого лайтбокса

Создание простого лайбокса

Термин «лайтбокс» происходит из области фотографии и применяется для отображения полноценной по размеру версии какого-либо миниатюрного изображения в модальном диалоговом окне. Обычно при этом задний план становится темнее, чтобы показать, что он деактивирован. Пользователь должен вступить во взаимодействие с изображением (например, щелкнув на кнопке Close (Закрыть)), чтобы продолжить работу с веб-страницей.

В настоящее время лайтбоксы весьма распространены, и многие из них поддерживают весьма сложную функциональность: анимации, переходы, а также возможность воспроизводить видео и загружать содержимое посредством Ajax.

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

Все ссылки с изображениями заключены в тег div с идентификатором gallery.

<div id="gallery" >
<a href="../images/pict1_h.jpg"><img class="pict" src="../images/pict1.jpg" alt="Год рждения"/></a>
<a href="../images/pict2_h.jpg"><img class="pict" src="../images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a href="../images/pict3_h.jpg"><img class="pict" src="../images/pict3.jpg" alt="Что тут пить"/></a>
<a href="../images/pict4_h.jpg"><img class="pict" src="../images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a href="../images/pict5_h.jpg"><img class="pict" src="../images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a href="../images/pict6_h.jpg"><img class="pict" src="../images/pict6.jpg" alt="Я тост принес"/></a>
</div>

Если мы хотим, чтобы при выводе изображения темнел экран, то нам надо добавить на веб-страницу элемент div, который по высоте и ширине будет таким же, как экран монитора. Внутри этого элемента мы разместим еще один элемент div, в который загрузим изображение.

Зададим стили для этих элементов. Для первого элемента с идентификатором #overlay: ширину и высоту 100% и черный цвет для фона. Для свойства position зададим fixed, чтобы зафиксировать элемент div на месте, на случай если пользователь изменит размеры окна. В центр элемента добавим еще и лоадер.

#overlay {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background:black url(../../images/loader.gif) no-repeat scroll center center;
}
#lightbox {
position: fixed;
top:10%;
bottom:30%;
left:30%;
right:20%;
}

А теперь установим обработчик событий click к лайтбокс-ссылкам. К нему добавим темный оверлейный элемент overlay, контейнер изображения и само изображение. Наличие контейнера для простого лайтбокса необязательно, однако он окажется кстати, для расширения функциональности лайтбокса, например к нему можно добавить рамки, описание или кнопки Next (Далее) и Previous (Назад).


$(document).ready(function() {
$('#gallery a').click(function(e) {
$('<div id="overlay"></div>')
.css({
"top":'0',
"opacity":'0'
})
.animate({'opacity': '0.5'}, 'slow')
.appendTo('body')
.click(function(){
removeLightbox();
});

$('<div id="lightbox"></div>')
.hide()
.appendTo('body');

$('<img>')
.attr("src", $(this).attr("href"))
.ready(function() {
positionLightboxImage();
})
.click(function() {
removeLightbox();
})
.appendTo("#lightbox");
return false;
});
});

Оверлей позиционируется в верхней части экрана с быстрым изменением прозрачности от невидимого состояния до уровня 50% для обеспечения фонового эффекта. Лайтбокс-контейнер добавляется на страницу и тут же скрывается, ожидая загрузки изображения. Изображение добавляется в контейнер, а его атрибут scr настраивается в соответствии с местоположением этого изображения (извлекаемого из атрибута href ссылки). Для этого мы используем jQuery-метод attr, который может применяться для извлечения или настройки любого атрибута элемента объектной модели документа DOM. Если его вызов осуществляется только с одним параметром (например, $( this). attr (' href' )),он возвращает значение данного атрибута. Если используется второй параметр (например, $( ''). attr (' src'. '../images/pict1_h.jpg'), он настраивает атрибут в соответствии с указанным значением. Затем мы присоединяем несколько обработчиков событий к изображению.

В завершение мы добавляем return false; для предотвращения поведения HTML-ссылки по умолчанию. В противном случае пользователю придется уходить с нашей веб-страницы и отдельно открывать изображение. Теперь взглянем на функцию positionLi ghtbox.


function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top,
'left': left
})
.fadeIn();
}

Когда изображение полностью загружается, происходит вызов функции positionLightboxImage. Она обеспечивает вывод изображения по центру экрана. Данная функция вычисляет центральную точку, для чего из высоты или ширины окна вычитает высоту или ширину изображения, затем делит полученный результат на 2. После этого выполняется точное изменение прозрачности при выводе изображения на экран.

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


function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
});
}

$(document).ready(function() {
$('#gallery a').click(function(e) {
$('<div id="overlay"></div>')
.css({
"top":'0',
"opacity":'0'
})
.animate({'opacity': '0.5'}, 'slow')
.appendTo('body')
.click(function(){
removeLightbox();
});

$('<div id="lightbox"></div>')
.hide()
.appendTo('body');

$('<img>')
.attr("src", $(this).attr("href"))
.ready(function() {
positionLightboxImage();
})
.click(function() {
removeLightbox();
})
.appendTo("#lightbox");
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $("#lightbox").height()) / 2;
var left = ($(window).width() - $("#lightbox").width()) / 2;
$("#lightbox")
.css({
"top": top,
"left": left
})
.fadeIn();
}

function removeLightbox() {
$("#overlay, #lightbox")
.fadeOut("slow", function() {
$(this).remove();
});
}
<!DOCTYPE html>
<html>
<title>Создание простого лайтбокса</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.w3-light-grey{color:#000!important;background-color:#f1f1f1!important}
.w3-content{max-width:966px;margin:16px auto 0 auto}
.w3-margin-bottom{margin-bottom:16px!important}
.w3-layout-container{display:table;width:100%; position:absolute; top:0; bottom:0; left:0; right:0}
.w3-row-padding{padding:0 8px}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s2{width:16.66666%}
.w3-col.s10{width:100%; margin:0}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-grey{color:#000!important;background-color:#9e9e9e!important}
.w3-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-display-container{position:relative}
.w3-container{padding:0.01em 16px}
.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important; text-align:center}
.w3-teal{color:#fff!important;background-color:#009688!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-center{text-align:center; height:70px; }
.fa{margin-top:20px}
#gallery{margin:0; padding:10px; text-align:center}
#gallery img{max-width:15%; margin:4px;}
#overlay {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background:black url(../../images/loader.gif) no-repeat scroll center center;
}
#lightbox {
position: fixed;
top:10%;
bottom:30%;
left:30%;
right:20%;
}
#lightbox img{max-width:100%; margin:0}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery a').click(function(evt) {
evt.preventDefault();
$('<div id="overlay"></div>')
.css({
'top':'0',
'opacity':'0'
})
.animate({'opacity': '0.5'}, 'slow')
.appendTo('body')
.click(function(){
removeLightbox();
});

$('<div id="lightbox"></div>')
.hide()
.appendTo('body');

$('<img>')
.attr('src', $(this).attr('href'))
.ready(function() {
positionLightboxImage();
})
.click(function() {
removeLightbox();
})
.appendTo('#lightbox');
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top,
'left': left
})
.fadeIn();
}

function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
});
}
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container">
<div class="w3-twothird w3-col s10" >
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Кадры из моих любимых фильмов</h2>

<div id="gallery" >
<a href="../images/pict1_h.jpg"><img class="pict" src="../images/pict1.jpg" alt="Год рждения"/></a>
<a href="../images/pict2_h.jpg"><img class="pict" src="../images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a href="../images/pict3_h.jpg"><img class="pict" src="../images/pict3.jpg" alt="Что тут пить"/></a>
<a href="../images/pict4_h.jpg"><img class="pict" src="../images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a href="../images/pict5_h.jpg"><img class="pict" src="../images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a href="../images/pict6_h.jpg"><img class="pict" src="../images/pict6.jpg" alt="Я тост принес"/></a>
</div>
<!-- End Right Column -->
</div>


<!-- End Page Container -->
</div>
<div style=" clear:both"
<footer class="w3-container w3-teal w3-center w3-margin-top">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>

</body>
</html>


Для написания статьи взяты примеры из книги «Изучаем jQuery» Эрл Каслдайн и Крэйг Шарки.