Тема: Не корректно працює лайтбокс
Всім доброго дня! Є питання. Захотів зробити лайтбокс. Знайшов статтю - http://get-element.3dn.ru/load/prostoj_ … /1-1-0-445
І все якби працює, але є одне "АЛЕ" - коли натискаеш на фото зверху все ОК, але якщо прогорнути вниз і натиснути, то фото все одно з*являється зверху.(див. прикріплені файли)
Чому так і як це змінити? Як зробити щоб фото-лайбокс зявлявсь там де і натиснуто, а не зверху?
ось код шаблону та стилів(шаблон під Джанго, але це не так важливо):
{% extends "photos/base.html" %}
{% load static from staticfiles %}
{% block meta_title %}{{ category }}{% endblock meta_title %}
{% block main %}
<div id="category-name">
{{ category }}
</div>
<div id="category-main">
{% for photo in photos %}
<div class="layout-photo">
<a class="open-lightbox" href="{% url "photo" photo.id %}"><img src="{{ photo.source.url }}" /></a>
</div>
{% endfor %}
</div>
<!-- LightBox begin-->
<div class="overlay-lightbox"></div>
<div class="lightbox"></div>
<!-- LightBox end -->
{% endblock main %}/* LightBox */
.overlay-lightbox {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #000;
opacity: 0.8;
}
.lightbox {
display: none;
width: 500px;
padding: 25px;
background: #ffffff;
box-shadow: 0 0 25px #111111;
-moz-box-shadow: 0 0 25px #111111;
-webkit-box-shadow: 0 0 25px #111111;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: 99;
}
a.close {
position: absolute;
top: 15px;
right: 15px;
}function initLightBox() {
$('.lightbox').css({
position: 'absolute',
top: '50%',
left: '50%',
margin: '-'+($('.lightbox').height()/2)+'px 0 0 -'+($('.lightbox').width()/2)+'px'
});
$('a.open-lightbox').click(function(event) {
event.preventDefault();
$('.lightbox').fadeIn(800);
$('.overlay-lightbox').fadeIn(800);
});
$('a.close, .overlay-lightbox').click(function(event){
event.preventDefault();
$('.lightbox').fadeOut(800);
$('.overlay-lightbox').fadeOut(800);
});
}
