Lightbox Single Image with Bootstrap with Thumbnail

You need Bootstrap: http://getbootstrap.com/css/ a full size image and its thumbnail reduced size.

First in your html page add the modal div where the full size image will appear, this div if invisible for the moment:

<!-- Bootstrap modal -->
<div class="modal fade" id="media_full_size" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body"><img src="" class="imagepreview" style="width: 100%;">
            </div>
            <div class="modal-footer"><p>Full Size</p>
            </div>
        </div>
    </div>
</div>

Then add a link with a the thumbnail of the full size image that will be open in big inside the lightbox later. Add as many links as you need:

<!-- One link for each image to open -->
<a href="#" data-src="URL-TO-FULL-SIZE-IMAGE" class="pop">
    <img src="URL-TO-THUBNAIL-IMAGE">
</a>

Then call the onclick event on every thumbnail image:

<!--One call for all the images-->
$('.pop').on('click', function() {
    $('.imagepreview').attr('src', $(this).data('src'));
    $('#media_full_size').modal('show');
});

The trick is using the data-src or data-foo called $(this)data('foo') which has the url to the full size image. And the class "pop" to catch the event onclick, on every thumbnail.

Really simple! And it works nicely!