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

<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}); }); });

Questions / Comments:

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

shabbir (0) - 7 months ago - Reply 0


Thanks its working

Addi (0) - 8 months 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 (0) - 9 months ago - Reply 0


Excelnt work

Bite Byte (0) - 10 months ago - Reply 0


js is not working

Bhupinder Kumar (0) - 11 months 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 (0) - 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 (0) - 1 year ago - Reply 0


Layout is fine but JS is not working.

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


Related: See More