Как создать супер-лайтбокс с помощью CSS и JavaScript
С появлением CSS анимации в жизни веб-дизайнеров и программистов появилась удивительная возможность проявить свою креативность, повозившись с кодом.
А с появлением лайтбокса они получили хороший инструмент для создания своих собственных изображений с эффектом 3D анимации, а также возможность затемнять фон, чтобы избавится от отвлекающих элементов при просмотре изображения.
Комбинирование лайтбокса с CSS и JavaScript предлагает веб-программистам ценный инструмент для улучшения их техники в создании великолепных 3D анимаций с лайтбоксом, применяя данные концепты для разработки собственных проектов веб-дизайна.
Использования CSS и лайтбокса
Вы можете создать такой дизайн, используя технику кодирования с лайтбоксом и CSS, являющуюся плодом изобретательности Эмануэля Феронато (Emanuele Feronato) и заслуживающую внимания тех, кто хочет изучить основы создания эффекта лайтбокса с помощью CSS. Эффект лайтбокса предварительно загружаемый и статический, что отлично подходит для изучения новичкам.

Изображение выше показывает, как темное перекрытие цвета заставляет фон веб-страницы блекнуть при использовании 80% непрозрачности. Перекрытие занимает все пространство браузера. С другой стороны, осветленный участок обеспечивает место для размещения лайтбокса, который может служить местом для вашего окна авторизации или фото.
Для начала вам нужно использовать CSS код, приведенный ниже:
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
В HTML файле вам нужно поместить вот этот код перед тегом:
<div id="light" class="white_content">Этот объект – лайтбокс</div><div id="fade" class="black_overlay"></div>
Затем вставьте этот код в ту часть, где вы хотите открыть лайтбокс:
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
Например, вы можете найти такую ссылку:
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">Click it</a>
Затем, чтобы закрыть лайтбокс, вам нужно включить такой код:
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';">Hide it</a>
В общем и целом, объединяя код, приведенный выше, у вас должно получиться следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ПРИМЕР ЛАЙТБОКСА</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>Основной контент. Чтобы отобразить лайтбокс нажмите <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">здесь</a></p>
<div id="light" class="white_content">Это содержимое лайтбокса.<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Закрыть</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Лайтбокс на JavaScript
Этот скрипт поможет вам создать простой эффект перекрытия лайтбокса:
<a href="lightbox.jpg" class="lightbox">open lightbox!</a>
Затем используйте вот этот код:
$(".lightbox").click(function() {
window.startOverlay();
});
Чтобы определить ссылку, на которую нужно нажать, необходимо получить атрибут href и отправить его как параметр контента:
$(".lightbox").click(function(){
overlayLink = $(this).attr("href");
window.startOverlay(overlayLink);
});
Нам нужно подготовить DOM (англ. Document Object Model, объектная модель документа) для того, чтобы получить два элемента, которые будут препятствовать прокрутке области просмотра, поэтому добавьте код, приведенный ниже:
function startOverlay(overlayLink) {
$("body").append('<div class="overlay"></div><div class="container"></div>').css({"overflow-y":"hidden"});
.....
}
Для этих двух элементов из DOM нам нужно добавить еще CSS код, чтобы применить к ним больше стилей, используя следующий код:
.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
}
Чтобы сделать перекрытие видимым, нам нужно применить эффект выцветания, используя данный код:
function startOverlay(overlayLink) {
.....
$(".overlay").animate({"opacity":"0.6"}, 200, "linear");
.....
}
Фактически, код создает анимацию с непрозрачностью со значением 0.6 в течение 200 миллисекунд. В результате мы получим линейный переход. Следующим шагом является загрузка контента в лайтбокс.
Мы будем использовать изображение, которое добавим в DOM, и фактически браузер будет скачивать его автоматически с помощью следующего кода:
function startOverlay(overlayLink) {
.....
$(".container").html('<img src="'+overlayLink+'" alt="" />');
.....
}
Затем нужно отобразить изображение и согласовать его по ширине и высоте.
Далее разместим лайтбокс на середине экрана и будем постепенно увеличивать его яркость, используя следующий код:
function startOverlay(overlayLink) {
.....
$(".container img").load(function() {
var imgWidth = $(".container img").width();
var imgHeight = $(".container img").height();
$(".container")
.css({
"top": "50%",
"left: "50%",
"width": imgWidth,
"height": imgHeight,
"margin-top": -(imgHeight/2), // середина
"margin-left":-(imgWidth/2)
})
.animate({"opacity":"1"}, 200, "linear");
});
}
Как только изображение успешно загружено, начнет выполняться функция загрузки. Вы почти у цели, но не забудьте добавить приведенный ниже код, чтобы быть уверенным, что браузер не загрузил и саму ссылку:
$(".lightbox").click(function() {
window.startOverlay();
return false;
});
В качестве последнего шага добавьте приведенный ниже код, чтобы пользователи могли закрыть лайтбокс:
$(".overlay").click(function(){
$(".container, .overlay")
.animate({"opacity":"0"}, 200, linear, function(){
$(".container, .overlay").remove();
})
});
Чтобы дать пользователю визуальную подсказку, на что он может кликать, нужно настроить CSS, добавив cursor:pointer; к элементу .overlay.
Наконец все готово. Вы можете создать перекрытие изображения, подобное этому:
