2017-01-02 39 views
0

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

回答

0

原来,图像标记指示收藏夹锚定图象的基础上,在那里它被定位。因此,将与其关联的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>