I'm using lightbox in a bootstrap build. I've added a group of images as anchor tags to a base image. However, when the base image is clicked the images that load into the light box start from "Image 6 of 6". Regardless of what numbers I use on the images it always loads up "Image 6 of 6". Which means the user needs to cycle backwards through the images. All I need is for it to load to "Image 1 of 6".
<div class="row">
<div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay=".3s">
<a href="img/portfolio/image-1/1.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<a href="img/portfolio/image-1/2.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<a href="img/portfolio/image-1/3.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<a href="img/portfolio/image-1/4.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<a href="img/portfolio/image-1/5.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<a href="img/portfolio/image-1/6.jpg" class="portfolio-box" data-lightbox="image-1" data-title="Your caption">
<img src="img/portfolio/1.jpg" class="img-responsive" alt="###">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category</div>
<div class="project-name">Project Name</div>
</div>
</div>
</a>
</div>
</div>
Turns out, the image tag directs the lightbox anchor images, based on where it is positioned. So moving the image tag with it's associated div tags up to below the first anchor tag solves the issue. Now the images load correctly (Image 1 of 6).