Question

我在bootstrap版本中使用lightbox。我已经将一组图像添加为基本图像的锚标签。但是，当点击基本图像时，加载到灯箱中的图像从“图像6的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>

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

1 个答案: