Реклама Google
Реклама Google
поисковые роботы
|
Лайтбокс css, javascript, html моя личная наработка
|
дата 2014-11-04
поблагодарили 0 просмотров 962 |
| ||||||||||||
Данный скрипт позволяет просматривать скрины на вашем сайте с увеличением по аналогии контакта, но свой скрипт я считаю лучше, это мой черновик, для пользования выложенный на данном сайте, пользуйтесь, если есть вопросы, задавайте 
Лично моё мнение, сгниёт контакт в руках mail.ru без Дурова, чем он им помешал - непонятно.
HTML
CSS
javascript
Лично моё мнение, сгниёт контакт в руках mail.ru без Дурова, чем он им помешал - непонятно.
HTML
<!-- litebox -->
<div id="lbx" onclick="lbs.end()">
<div class="cnt">
<div>
<div id="lht" onclick="lbs.stopEvent()">
</div>
</div>
</div>
</div>
<!-- end litebox -->
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 */
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);
}
Последнее на сайте
|
Также, как вариант, купить тариф на GGsel :D
https://ggsel.net/catalo
|
|
|
621000
|
|
|
621000
|
|
|
new record
|
|
ну и зря не веришь тренироваться надо вот и всё.
|
|
|
620000
|
|
|
583000
|
|
|
308000
|
Последнее на форуме
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|