Lecaw

Учимся создавать Web-сайты

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

September 9, 2013
CSS
500hits

После того как в CSS появилась возможность создавать анимацию, это дало разработчикам и веб-дизайнерам большую почву для творчества. Лайтбокс считается лучшим инструментом для создания собственного изображения с 3D-эффектами анимации. При использовании затемнения фона, просмотр изображений становится намного удобнее и приятнее. Объединение лайтбокса на CSS и JavaScript многократно расширяет возможности создания 3D-анимации в Ваших проектах.

 

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

Ниже приведен пример использования лайтбокса и эффектов CSS от известного дизайнера Emanuele Feronato.

На изображении выше присутствует темный фон с 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">This is lightbox object</div><div id="fade" class="black_overlay"></div>

Затем вставьте этот код в ту часть сайта, где будет располагаться сам лайтбокс:

document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';

Можете разместить в данной области ссылку:

<a href="#">Click it</a>

Чтобы закрыть лайтбокс, используйте следующий код:

<a href="#">Hide it</a>

Вот что у вас должно получится:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</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>This is the main content. To display a lightbox click <a href="#">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href="#">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

Lightbox на JavaScript

Данный скрипт создает простой эффект наложения лайтбокса по ссылке:

open lightbox!

Далее используем этот код:

$(".lightbox").click(function() {
    window.startOverlay();
});

Чтобы показать, что ссылка уже активна, необходимо включить атрибут href и задать его в качестве параметра, используем следующий код:

$(".lightbox").click(function(){
    overlayLink = $(this).attr("href");
    window.startOverlay(overlayLink);
});

Нам нужно подготовить DOM, чтобы эти два элемента препятствовали прокрутке области просмотра:

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), // the middle position
                "margin-left":-(imgWidth/2)
            })
            .animate({"opacity":"1"}, 200, "linear");
    });
}

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий