Стрелка вперед в лайтбоксе опускается ниже после первого изображения

У меня странная проблема с 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;

}