Реклама Google
Ещё реклама Google
Лайтбокс css, javascript, html моя личная наработка
0 за 0 против
дата 2014-11-04
поблагодарили 0
просмотров 442
статью добавил DooMka
добавил
DooMka
Данный скрипт позволяет просматривать скрины на вашем сайте с увеличением по аналогии контакта, но свой скрипт я считаю лучше, это мой черновик, для пользования выложенный на данном сайте, пользуйтесь, если есть вопросы, задавайте So-so

Лично моё мнение, сгниёт контакт в руках mail.ru без Дурова, чем он им помешал - непонятно. Not so

Html5 HTML



        <!-- litebox -->
        <div id="lbx" onclick="lbs.end()">
            <div class="cnt">
                <div>
                    <div id="lht" onclick="lbs.stopEvent()">

                    </div>
                </div>
            </div>
        </div>
        <!-- end litebox -->





Css3 CSS



html, body{
    width: 100%;
}

/* litebox one */
#lbx{
    position: fixed;
    display: none;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow-y: scroll;
    -webkit-animation:myfirst 1s; /* Chrome, Safari, Opera */
}
#lbx .cnt{
    display: inline-table;
    width: 100%;
    height: 100%;
}
#lbx .cnt > div{
    display: table-cell;
    vertical-align: middle;
}
#lbx .cnt > div > div{
    display: inline-block;
    /*background: #fff;*/
    min-width: 300px;
    min-height: 300px;
    -webkit-animation: mywidth 0.5s; /* Chrome, Safari, Opera */
    animation: mywidth 0.5s;
}
#butext {
    position: absolute;
    top: -15px;
    right: -10px;
    width: 36px;
    height: 36px;
    background: url(../img/close_pop.png) no-repeat;
    cursor: pointer;
}
#butext:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}
/* end litebox one */

/* litebox img */
.kfgd{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 20px 0;
    min-width: 500px;
    width: 80%;
    max-width: 1000px;
    height: 80%;
    min-height: 450px;
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    cursor: default;
}
.kfgd{
    padding: 20px 20px 20px;
}
.kfgd h1{
    margin: 0;
}
.kfgd h2{
    margin: 5px auto;
}
.kfgd img{
    max-width: 90%;
    max-height: 90vh;
}
/* end litebox img */




Js javascript



var lbs = {
    st: 0,
    start: function (html) {
        lbs.st = window.pageYOffset;
        document.body.style.overflowY = "hidden";
        document.body.style.position = "fixed";
        document.body.style.marginTop = "-" + lbs.st + "px";
        document.getElementById("lbx").style.display = "block";
        document.getElementById("lht").innerHTML = html;
    },
    end: function () {
        document.body.style.overflowY = "auto";
        document.body.style.position = "relative";
        document.body.style.marginTop = "0";
        window.scrollBy(0, lbs.st);
        document.getElementById("lbx").style.display = "none";
        document.getElementById("lht").innerHTML = "";
    },
    stopEvent: function (evt) {
        (evt && evt.stopPropagation) ? evt.stopPropagation() : window.event.cancelBubble = true;
    }
};

function slide(id) {
    var tmp = "\
        <div class='kfgd'>\
            <div id='butext' onclick='lbs.end();'></div>\
            <img src='" + id.getAttribute("src") + "'>\
        </div>";
    lbs.start(tmp);
}

все пользователи
все группы

разработчики