<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" style=" margin:20px"> <div class="col-xs-12"> <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="all"> All </button> <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="art"> Websites </button> <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="media"> Brochures </button> <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="brand"> Logo design / Brand Collaterals </button> </div> </div> <div class="row"> <h1>Bootstrap 3 Lightbox image gallery using Modal</h1> <div class="col-lg-3 col-sm-4 col-xs-6" data-tag="art"><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" data-tag="media" ><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" data-tag="media"><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" data-tag="art" ><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" data-tag="brand"><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" data-tag="media"><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" data-tag="art"><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" data-tag="brand"><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" data-tag="brand"><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" data-tag="art"><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" data-tag="brand" ><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" data-tag="media"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <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}); }); }); !function(d){ var c="portfilter"; var b=function(e){ this.$element=d(e); this.stuff=d("[data-tag]"); this.target=this.$element.data("target")||""}; b.prototype.filter=function(g){ var e=[],f=this.target; this.stuff.fadeOut("fast").promise().done(function(){d(this).each(function(){if(d(this).data("tag")==f||f=="all"){ e.push(this)}});d(e).show()})};var a=d.fn[c];d.fn[c]=function(e){return this.each(function(){ var g=d(this),f=g.data(c);if(!f){g.data(c,(f=new b(this)))}if(e=="filter"){f.filter()}})}; d.fn[c].defaults={}; d.fn[c].Constructor=b; d.fn[c].noConflict=function(){d.fn[c]=a; return this};d(document).on("click.portfilter.data-api","[data-toggle^=portfilter]",function(f){d(this).portfilter("filter")})}(window.jQuery);