<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="http://placehold.it/600x400" alt="demo 1"> </a> </div> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="http://placehold.it/600x400" alt="demo 2"> </a> </div> </div> <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog"> <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-content"> <div class="modal-body"> <img src="/" alt="" /> </div> </div> </div> </div>

body { padding: 30px 0px; } #lightbox .modal-content { display: inline-block; text-align: center; } #lightbox .close { opacity: 1; color: rgb(255, 255, 255); background-color: rgb(25, 25, 25); padding: 5px 8px; border-radius: 30px; border: 2px solid rgb(255, 255, 255); position: absolute; top: -15px; right: -55px; z-index:1032; }

$(document).ready(function() { var $lightbox = $('#lightbox'); $('[data-target="#lightbox"]').on('click', function(event) { var $img = $(this).find('img'), src = $img.attr('src'), alt = $img.attr('alt'), css = { 'maxWidth': $(window).width() - 100, 'maxHeight': $(window).height() - 100 }; $lightbox.find('.close').addClass('hidden'); $lightbox.find('img').attr('src', src); $lightbox.find('img').attr('alt', alt); $lightbox.find('img').css(css); }); $lightbox.on('shown.bs.modal', function (e) { var $img = $lightbox.find('img'); $lightbox.find('.modal-dialog').css({'width': $img.width()}); $lightbox.find('.close').removeClass('hidden'); }); });