画像にライトボックス効果を与える

Question

すべての画像にライトボックス効果を入れたい。画像をクリックすると、同じページに拡大表示する必要があります。以外の部分をクリックすると、画像を閉じる必要があります。

<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> 

Answer 1

ニースでブートストラップが簡単です。

<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>