Реклама Google
Ещё реклама Google
Просмотр изображения javascript
0 за 0 против
дата 2014-11-03
поблагодарили 0
просмотров 395
статью добавил DooMka
добавил
DooMka
Самая простая форма для просмотра ваших изображений на вашем сайте

Html5 HTML

В header сайта подключаем последнюю библиотеку jquery, но можете обойтись и без неё, для этого достаточно раскомментировать некоторые строки в js и удалить строки от jquery


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


<div id="litebox">
            <div class="t">
                <div>
                    <div id="csld"></div>
                </div>
            </div>
        </div>



Css3 CSS


/* litebox */
#litebox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
}
#litebox .t{
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#litebox .t > div{
    vertical-align: middle;
}
#litebox .t > div > div{

}
#litebox .t > div > div img{
    max-height: 450px;
}
/* end litebox */


Js javascript



function slide(id) {
    document.getElementById("csld").innerHTML = "\
    <div class='kfgd' onclick='lbc();'>\
    <div id='butext' onclick="exitsl();"></div>\
    <img src='img/max/" + Number(id.getAttribute("src").replace(/D+/g, "")) + ".jpg'></div>";
//    document.getElementById("litebox").style.display = "block";
    $("#litebox").fadeIn(1000);
}

function exitsl() {
//    document.getElementById("litebox").style.display = "none";
    $("#litebox").fadeOut(500);
}

function stopEvent(evt) {
    (evt && evt.stopPropagation) ? evt.stopPropagation() : window.event.cancelBubble = true;
}
function lbc(evt) {
    return stopEvent(evt);
}
все пользователи
все группы

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