У меня странная проблема с lightbox2. После навигации по первому изображению в моем div прямая стрелка падает ниже изображения, а кнопка закрытия не закрывает изображение, вместо этого она перемещается вперед по изображениям.Лайтбокс вперед навигация стрелка падает ниже после первого изображения
Я не, если это проблема с использованием колонок для отображения изображений или что.
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;
}
Пожалуйста, удалите часть php из вашего кода, так как это не имеет никакого отношения вообще, сохраните только html, добавьте соответствующий код javascript и определите, какую версию лайтбокса вы используете ... Вы добавили там два тега. – Dekel
@Dekel PHP показывает, как мои divs настроены, что, я думаю, очень актуально. Разве, вы предлагаете мне опубликовать HTML-код, который выкладывает PHP? Их нет js, кроме JS, из сценария лайтбокса. Я буду оставлять ярлык лайтбокса, так как в описании говорится следующее: Лайтбокс и новый ** Лайтбокс 2 ** - это приложение JavaScript, используемое для отображения больших изображений с использованием модальных диалогов. – Biermannder
Да, лучше показать html, который генерирует ваш php-код. Что касается javascript - я думаю, вы должны запустить лайтбокс. Это не просто включение js-файла ... – Dekel