Bootstrap灯箱和多个图像

Question

我正在使用引导灯箱，并试图让它在一个页面上的多个图像工作。所以当你点击缩略图时，你会看到更大的图像。

有人知道这可能吗？

感谢

Answer 1

要使用lightbox为多张图片，你必须在href设置不同id's与data-toggle属性设置为lightbox。例如，如果你有四个图像，然后在html中创建这些超链接：

<a data-toggle="lightbox" href="#image1"><img src="image1.png"></a> 
<a data-toggle="lightbox" href="#image2"><img src="image2.png"></a> 
<a data-toggle="lightbox" href="#image3"><img src="image3.png"></a> 
<a data-toggle="lightbox" href="#image4"><img src="image4.png"></a> 

Answer 2

我可以给你简单的例子休息，你必须尝试

/* CSS only gallery (using radio inputs) 
 
* See http://css-tricks.com/forums/topic/click-thumbnail-and-make-it-larger-image-image-gallery-wo-javascript/ 
 
* Support needed for IE7 & older - see http://css-tricks.com/child-and-sibling-selectors/ 
 
*/ 
 
.wrapper { 
 
    width: 700px; 
 
    position: relative; 
 
} 
 
.wrapper .thumbnails { 
 
    width: 150px; 
 
    float: right; 
 
} 
 
.wrapper a { 
 
    margin: 2px; 
 
} 
 
.wrapper img { 
 
    border: 1px solid #000; 
 
} 
 
.wrapper label > img { 
 
    opacity: 0.6; 
 
} 
 
.wrapper label > img:hover { 
 
    opacity: 1; 
 
} 
 
.wrapper input { 
 
    display: none; 
 
} 
 
.wrapper input:checked + .full-image { 
 
    display: block; 
 
} 
 
.wrapper input:checked ~ img { 
 
    opacity: 1; 
 
} 
 
.wrapper .full-image { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.wrapper .description { 
 
    width:95%; 
 
    padding:5px; 
 
    background-color:#DDDDDD; 
 
}

<h2>Click on a thumbnail image</h2> 
 
<div class="wrapper"> 
 

 
    <div class="full-image"></div> 
 

 
    <div class="thumbnails"> 
 

 
     <label> 
 
      <input type="radio" name="full-image" checked> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/1" alt="Pic1" /> 
 
       <div class="description">Description 1.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/1"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/2" alt="Pic2" /> 
 
       <div class="description">Description 2.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/2"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/3" alt="Pic3" /> 
 
       <div class="description">Description 3.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/3"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/4" alt="Pic4" /> 
 
       <div class="description">Description 4.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/4"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/5" alt="Pic5" /> 
 
       <div class="description">Description 5.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/5"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/6" alt="Pic6" /> 
 
       <div class="description">Description 6.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/6"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/7" alt="Pic7" /> 
 
       <div class="description">Description 7.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/7"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/8" alt="Pic8" /> 
 
       <div class="description">Description 8.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/8"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/9" alt="Pic9" /> 
 
       <div class="description">Description 9.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/9"/> 
 
     </label> 
 

 
     <label> 
 
      <input type="radio" name="full-image"> 
 
      <div class="full-image"> 
 
       <img src="http://lorempixel.com/530/400/nature/10" alt="Pic10" /> 
 
       <div class="description">Description 10.</div> 
 
      </div> 
 
      <img src="http://lorempixel.com/65/65/nature/10"/> 
 
     </label> 
 
    </div> 
 

 
</div>