1 Востаннє редагувалося A.N.Onim (24.03.2016 12:31:17)

Тема: Не корректно працює лайтбокс

Всім доброго дня! Є питання. Захотів зробити лайтбокс. Знайшов статтю - 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);
    });
}
Post's attachments

Знімок екрану - 24.03.16 - 11:28:36.png 372.42 kb, 57 downloads since 2016-03-24 

2

Re: Не корректно працює лайтбокс

ви не враховуєте висоту на яку проскролена сторінка

(function(){
  console.log("called anonymously");
})()
Подякували: A.N.Onim1

3 Востаннє редагувалося 221VOLT (24.03.2016 23:38:53)

Re: Не корректно працює лайтбокс

на мою думку вам можна спокійно викинути це все сміттячко - і jq, і цей плагін до jq...

вам потрібно 2 блоки поверх всього сайту --css -- display:absolute; width:100%; height:100%; top:0;left:0;
z-index у першого - темного - фонового тобто -- пропишіть чуть меньшим за z-index у верхнього - того світлого який з інфою

плавну появу і зникнення блоку - можна з допомогою js змінювати прозорість блоків - від 0 до 100% і назад - тобто css - opacity від 0 до 1

загалом все що вам потрібно для вирішення цієї задачі - це декілька css значень + на js їх задати та\або змінювати
(якщо я правильно зрозумів вашу задачу)

https://blog.clever-games.win/
Це ще не кінець. Це навіть не початок кінця. Але, можливо, це кінець початку.
Зростання мудрості можна точно вимірювати ступенем зменшення злоби.
Подякували: A.N.Onim, leofun012