Give lightbox effect to images

Question

I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.

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

Try a tutorial: https://paulund.co.uk/how-to-create-a-simple-modal-box-with-jquery — Aaron Lavers, May 17 '16 at 05:17
If you are using bootstrap css and js then Please see this [Reference](http://stackoverflow.com/questions/25023199/bootstrap-open-image-in-modal) — Vishal, May 17 '16 at 07:29

score 0 · Answer 1 · answered May 17 '16 at 09:00

Nice and easy with bootstrap.

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

Give lightbox effect to images

1 Answers1