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>