2016-09-29 4 views
0

У меня странная проблема с lightbox2. После навигации по первому изображению в моем div прямая стрелка падает ниже изображения, а кнопка закрытия не закрывает изображение, вместо этого она перемещается вперед по изображениям.Лайтбокс вперед навигация стрелка падает ниже после первого изображения

Nav arrow first pic

nav arrow second pic

Я не, если это проблема с использованием колонок для отображения изображений или что.

HTML

<div id="masonryWrapper"> 

    <div id="masonryWrapper"> 
     <div class="masonry"> 
     <a href="img/work/DSC00967 (2014_10_01 00_23_54 UTC).jpg"data-lightbox="photography"> 
      <div class="item"><img src="img/work/DSC00967 (2014_10_01 00_23_54 UTC).jpg"> 
      </div> 
     </a> 
     <a href="img/work/DSC01365 (2014_10_01 00_23_54 UTC).jpg" data-lightbox="photography"> 
      <div class="item"><img src="img/work/DSC01365 (2014_10_01 00_23_54 UTC).jpg"> 
      </div> 
     </a> 
    </div> 
</div> 

CSS

.masonry { /* Masonry container */ 
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 
-webkit-column-gap: 1em; /* Chrome, Safari, Opera */ 
-moz-column-gap: 1em; /* Firefox */ 
column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
display: inline-block; 
margin: 0 0 1em; 
width: 100%; 
overflow: hidden; 
position: relative; 

} 

.item img 
{ 
width: 100%; 
transition: all .2s ease-in-out; 
vertical-align: top; 

} 

.item:hover img 
{ 
transform: scale(1.1); 
} 

.item:after 
{ 
content: '\A'; 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
background:rgba(255,255,255,0.6); 
opacity: 0; 
transition: all .2s ease-in-out; 
} 

.item:hover:after 
{ 
opacity: 1; 
} 

#masonryWrapper 
{ 
max-width: 980px; 
margin: 0 auto; 
margin-top: 10%; 
overflow: hidden; 

} 
+0

Пожалуйста, удалите часть php из вашего кода, так как это не имеет никакого отношения вообще, сохраните только html, добавьте соответствующий код javascript и определите, какую версию лайтбокса вы используете ... Вы добавили там два тега. – Dekel

+0

@Dekel PHP показывает, как мои divs настроены, что, я думаю, очень актуально. Разве, вы предлагаете мне опубликовать HTML-код, который выкладывает PHP? Их нет js, кроме JS, из сценария лайтбокса. Я буду оставлять ярлык лайтбокса, так как в описании говорится следующее: Лайтбокс и новый ** Лайтбокс 2 ** - это приложение JavaScript, используемое для отображения больших изображений с использованием модальных диалогов. – Biermannder

+0

Да, лучше показать html, который генерирует ваш php-код. Что касается javascript - я думаю, вы должны запустить лайтбокс. Это не просто включение js-файла ... – Dekel

ответ

0

Похоже, это был вопрос заполнения в lightbox.css

Я изменил отступы 0 на следующие два

классами:
.lb-prev, .lb-next { 
    height: 100%; 
    cursor: pointer; 
    display: block; 
    padding: 0; 
} 

Отступы вызывали его выталкивание из div и вниз.

0

Для чего это стоит, я вообще не вижу кнопки навигации, и добавление настройки прокладки не изменило ситуацию.

+0

Я бы открыл firebug или похожую программу и взглянул на ваш макет. Возможно, у вас есть еще один css, добавляющий дополнение к div или img и влияющий на стрелки. Это также может быть что-то с состоянием зависания. – Biermannder

+0

Оказалось, после многого поиска в Интернете, что я пропустил что-то в настройке для своего. Изображения не были в правильной папке. Как только я поместил их в папку root/images, он работал отлично. Благодарю. –