<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}
</style>
<script type="text/javascript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Bootstrap 3 Lightbox using Modal</h1>
<div class="row">
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 1"><img src="img/r1.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 2"><img src="img/r2.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 3"><img src="img/r3.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 4"><img src="img/r4.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 5"><img src="img/r5.jpg" alt="Parkour" class="thumbnail img-responsive"></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 6"><img src="img/r6.jpg" alt="Parkour" class="thumbnail img-responsive"></a></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 8"><img src="img/r8.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 9"><img src="img/r9.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 10"><img src="img/r10.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 11"><img src="img/r11.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 12"><img src="img/r12.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
<div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 13"><img src="img/r13.jpg" alt="Parkour" class="thumbnail img-responsive"></a></div>
</div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Heading</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>