给图像添加灯箱效果

-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

给图像添加灯箱效果

回答

相关问题