擴大縮略圖Twitter的引導

Question

參考：http://twitter.github.com/bootstrap/components.html#thumbnails

我一直都使用Twitter的引導，但我不能讓縮略圖上點擊它們時擴大自己的全尺寸的圖像。我必須手動實現這個使用jQuery或者boostrap支持這個在他們的JS庫嗎？

如果我確實需要使用jQuery，有人可以指點我在哪裏可以提到他們的文檔？

謝謝

Answer 1

是的，您必須手動實現此功能。

有很多jQuery插件可用於此。我喜歡Fancybox和prettyPhoto。

此鏈接可以幫助你： 15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs

Answer 2

這可以通過引導來完成。

像這樣：

<a href="images/content/dummy-image.jpg" class="thumbnail"><img src="images/content/dummy-image.jpg " alt='Dummy Image' /></a> 

我設置了視口比例，並確保您的引導JS和CSS鏈接使用過多：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

Answer 3

只是因爲我需要同樣的事情，現有的答案（s）並不令人滿意：單獨使用bootstrap有一個好方法。我有這樣的功能：

function image(id, img, text) { 
     return text + "<div id='" + id + "' class='modal fade' tabindex='-1' role='dialog'>" 
      + "<div class='modal-dialog'><div class='modal-content'><div class='modal-body'>" 
      + "<img src='" + img + "' class='img-responsive'></div></div></div></div>" 
      + "<div class='col-xs-4 col-md-4 text-right'><a class='thumbnail' href='#' data-toggle='modal' data-target='#" + id + "'>" 
      + "<img src='" + img + "'/></a></div>" 
    } 

這就產生HTML這樣的：

<div id="tea-live" class="modal fade" tabindex="-1" role="dialog" style="display: none;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <img src="images/tea-live.png" class="img-responsive"> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-xs-4 col-md-4 text-right"> 
    <a class="thumbnail" href="#" data-toggle="modal" data-target="#tea-live"> 
     <img src="images/tea-live.png"> 
    </a> 
</div> 

這將創建一個模型箱在同一頁上的衰落。