为图像提供灯箱效果

Give lightbox effect to images

本文关键字：图像      更新时间：2023-09-26

我想在每个图像上都加一个灯箱效果。当我点击一个图像时，它必须被放大（在同一页上），当我点击网页的任何部分（图像除外）时，图像必须关闭。

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

使用引导程序既简单又漂亮。

<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>
相关文章：