給圖像添加燈箱效果

-1

我想爲每個圖像添加燈箱效果。當我點擊圖片時，圖片必須放大（在同一頁面上），當我點擊網頁的任何部分（除外）時，圖片必須關閉。給圖像添加燈箱效果

<div class="row jumbotron"> 
    <div class="text-center"> 
     <h1>Gallery</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="well"> 

      <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="well"> 

       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="well"> 
       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="well"> 
       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="well"> 
       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="well"> 
       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="well"> 
       <img height="180px" src="images/a.jpg" class="img-responsive img-center"/> 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-05-17 Crusader

嘗試教程：https://paulund.co.uk/how-to-create-a-simple-modal-box-with-jquery –

拆卸下來的假文字和不必要的圖像，文本編輯 –

如果您正在使用引導CSS和JS然後請參閱此[參考]（http://stackoverflow.com/questions/25023199/bootstrap-open-image-in-modal） – Vishal

不錯，很容易與自舉。

<div class="col-sm-4"> 
    <img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/> 
     <div class="modal lightbox" tabindex="-1" role="dialog"> 
      <div class="modal-dialog modal-lg"> 
       <div class="modal-content"> 
        <img src="*insert image*" class="img-responsive"/> 
       </div> 
      </div> 
     </div> 
</div>

來源

2016-05-17 09:00:32 Alex

給圖像添加燈箱效果

回答

相關問題