ライトボックスはイメージを逆順でロードします

Question

私はブートストラップビルドでライトボックスを使用しています。私は、ベース画像にアンカータグとして画像のグループを追加しました。ただし、ベース画像をクリックすると、ライトボックスに読み込まれる画像は「6の画像6」から始まります。画像に何を使用しているかにかかわらず、常に「画像6/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>