Как создать супер-лайтбокс с помощью CSS и JavaScript

0 ∞ 1

С появлением CSS анимации в жизни веб-дизайнеров и программистов появилась удивительная возможность проявить свою креативность, повозившись с кодом.

А с появлением лайтбокса они получили хороший инструмент для создания своих собственных изображений с эффектом 3D анимации, а также возможность затемнять фон, чтобы избавится от отвлекающих элементов при просмотре изображения.

Комбинирование лайтбокса с CSS и JavaScript предлагает веб-программистам ценный инструмент для улучшения их техники в создании великолепных 3D анимаций с лайтбоксом, применяя данные концепты для разработки собственных проектов веб-дизайна.

Использования CSS и лайтбокса

Вы можете создать такой дизайн, используя технику кодирования с лайтбоксом и CSS, являющуюся плодом изобретательности Эмануэля Феронато (Emanuele Feronato) и заслуживающую внимания тех, кто хочет изучить основы создания эффекта лайтбокса с помощью CSS. Эффект лайтбокса предварительно загружаемый и статический, что отлично подходит для изучения новичкам.

Использования 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;
}
Как с помощью JavaScript создать очередь с приоритетом

В 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

Лайтбокс на 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="" />');
    .....
}
Создание динамических форм с помощью JavaScript

Затем нужно отобразить изображение и согласовать его по ширине и высоте.

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

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.

Наконец все готово. Вы можете создать перекрытие изображения, подобное этому:

Лайтбокс на JavaScript

РедакцияПеревод статьи «How to Create a Lightbox Ultra Using CSS and JavaScript»