img1 displayed twice in Lightbox

Question

I have the following html markup generated through php:

<a href="pic/img1.jpg" data-lightbox="gallery1" data-title="gallery1">
<div class="img-wrap">
    <img src="pic/thumbs/img1.jpg"><span class="caption">Gallery1</span></a>
</div>
<a href="pic/img2.jpg" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="pic/img3.jpg" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="pic/img4.jpg" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="pic/img5.jpg" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="pic/img6.jpg" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="pic/img7.jpg" data-lightbox="gallery1" data-title="gallery1"></a>

The issue i'm having is that when clicking on the thumbnail, the lightbox loads img1 in position 2 of 8, and pressing back in the lightbox brings another copy of img1. I'm thinking it's due to light box including the thumbnail img as well as the full size one.

Any quick and easy solutions to this??

Answer 1

It appears that your HTML is invalid. You've got:

<a>
  <div>
    <img>
    <span>
  </a>
</div>

I suggest:

<div>
  <a>
    <img>
    <span>
  </a>
</div>

body {
    background-image:url("http://files.customize.org/thumbnails/larger/10302.jpg");
    background-repeat: no-repeat;
    margin: 10px;
}
.thumb {
    border: 5px solid yellow;
    margin-right: 5px;
}
/* line 6, ../sass/lightbox.sass */
 #lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
    opacity: 0.85;
    display: none;
}
/* line 15, ../sass/lightbox.sass */
 #lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10000;
    text-align: center;
    line-height: 0;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
 #lightbox img {
    width: auto;
    height: auto;
}
/* line 27, ../sass/lightbox.sass */
 #lightbox a img {
    border: none;
}
/* line 30, ../sass/lightbox.sass */
 .lb-outerContainer {
    position: relative;
    background-color: white;
    *zoom: 1;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .lb-outerContainer:after {
    content:"";
    display: table;
    clear: both;
}
/* line 39, ../sass/lightbox.sass */
 .lb-container {
    padding: 10px;
}
/* line 42, ../sass/lightbox.sass */
 .lb-loader {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
/* line 51, ../sass/lightbox.sass */
 .lb-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
/* line 59, ../sass/lightbox.sass */
 .lb-container > .nav {
    left: 0;
}
/* line 62, ../sass/lightbox.sass */
 .lb-nav a {
    outline: none;
}
/* line 65, ../sass/lightbox.sass */
 .lb-prev, .lb-next {
    width: 49%;
    height: 100%;
    background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    /* Trick IE into showing hover */
    display: block;
}
/* line 72, ../sass/lightbox.sass */
 .lb-prev {
    left: 0;
    float: left;
}
/* line 76, ../sass/lightbox.sass */
 .lb-next {
    right: 0;
    float: right;
}
/* line 81, ../sass/lightbox.sass */
 .lb-prev:hover {
    background: url(http://lokeshdhakar.com/projects/lightbox2/images/prev.png) left 48% no-repeat;
}
/* line 85, ../sass/lightbox.sass */
 .lb-next:hover {
    background: url(http://lokeshdhakar.com/projects/lightbox2/images/next.png) right 48% no-repeat;
}
/* line 88, ../sass/lightbox.sass */
 .lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    *zoom: 1;
    width: 100%;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -ms-border-bottom-left-radius: 4px;
    -o-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -ms-border-bottom-right-radius: 4px;
    -o-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .lb-dataContainer:after {
    content:"";
    display: table;
    clear: both;
}
/* line 95, ../sass/lightbox.sass */
 .lb-data {
    padding: 0 10px;
    color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
 .lb-data .lb-details {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
 .lb-data .lb-caption {
    font-size: 13px;
    font-weight: bold;
    line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
 .lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
 .lb-data .lb-close {
    width: 35px;
    float: right;
    padding-bottom: 0.7em;
    outline: none;
}
/* line 117, ../sass/lightbox.sass */
 .lb-data .lb-close:hover {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>

<div class="img-wrap">
    <a href="http://lorempixel.com/400/200/?1" data-lightbox="gallery1" data-title="gallery1">
        <img src="http://lorempixel.com/400/200/?2" />
        <span class="caption">Gallery1</span>
    </a>
</div>

<a href="http://lorempixel.com/400/200/?3" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="http://lorempixel.com/400/200/?4" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="http://lorempixel.com/400/200/?5" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="http://lorempixel.com/400/200/?6" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="http://lorempixel.com/400/200/?7" data-lightbox="gallery1" data-title="gallery1"></a>
<a href="http://lorempixel.com/400/200/?8" data-lightbox="gallery1" data-title="gallery1"></a>