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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(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});
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 () - 6 years 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 () - 7 years ago - Reply 0


Thanks its working

Addi () - 7 years 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 () - 7 years ago - Reply 0


Excelnt work

Bite Byte () - 8 years ago - Reply 0


js is not working

Bhupinder Kumar () - 8 years 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 () - 8 years 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 () - 8 years ago - Reply 0


Layout is fine but JS is not working.

Валентин () - 8 years ago - Reply 0