"Bootstrap 3 Lightbox image gallery using Modal"
Bootstrap 3.2.0 Snippet by sunilkaranjit

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="row"> <h1>Bootstrap 3 Lightbox image gallery using Modal</h1> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/777"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/EEE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/DDD"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <hr> <hr> </div> </div> <div tabindex="-1" class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" 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>
.modal-dialog {width:600px;} .thumbnail {margin-bottom:6px;}
$(document).ready(function() { $('.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}); }); });

Related: See More


Questions / Comments:

This is mostly working for me. Nice job. Just one issue that I'm having: when I click on one image in the gallery, the popup opens, but it also scrolls back up to the top of the page. I need it to stay in one place. Any ideas on this?

Thanks in advance.

thePixelPixie () - 8 months ago - Reply 0


my files are not working and due to that I cannot use the above code
help me plz to get ride of it!

shabbir () - 1 year ago - Reply 0


Thanks its working

Addi () - 1 year ago - Reply 0


JS:
<script src="https://code.jquery.com/jqu..."></script>
<script>
$(document).ready(function() {
$(".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>

This work.

Staszekk PL () - 1 year ago - Reply 0


Excelnt work

Bite Byte () - 1 year ago - Reply 0


js is not working

Bhupinder Kumar () - 1 year ago - Reply 0


The JS is definitely failing here.

property-modal.js:1 Uncaught ReferenceError: $ is not defined

Suggestions on how to fix this? I am sure that it is really simple if you are a javascript developer.

tazizhere () - 1 year ago - Reply 0


you have not included JQuery, just paste this at your <head>

<script src="https://code.jquery.com/jqu..." integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

Jeiemgi () - 1 year ago - Reply 0


Layout is fine but JS is not working.

Валентин () - 1 year ago - Reply 0