灯箱以相反的顺序加载图像

Question

我在 bootstrap 构建中使用灯箱。我已经将一组图像作为锚标记添加到基本图像中。但是，当单击基本图像时，加载到灯箱中的图像从 "Image 6 of 6" 开始。无论我在图像上使用什么数字，它总是会加载 "Image 6 of 6"。这意味着用户需要向后循环浏览图像。我只需要加载到 "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>

Answer 1

事实证明，图片标签根据其所在位置引导灯箱锚图片。因此，将图像标签及其关联的 div 标签移动到第一个锚标签下方即可解决问题。现在图像正确加载（第 1 个，共 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">
      <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 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">
    </a>
  </div>
</div>

灯箱以相反的顺序加载图像

Lightbox loads images in reverse order

html

lightbox