<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--#### ### How to add in your boostrap project 1) Add jQuery "<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>" 2) Download fancybox (https://github.com/fancyapps/fancyBox) 3) Or use CDN (http://cdnjs.com/libraries/fancybox) ####--!> <!-- References: https://github.com/fancyapps/fancyBox --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script> <div class="container"> <div class="row"> <div class='list-group gallery'> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png" title="Electrical Power Lines and Pylons disappear over t.. (pautliubomir)"> <img class="img-responsive" alt="" src="http://placehold.it/200x250" /> <div class='text-right'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> <div class='text-right'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> <div class='text-right'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox " rel="ligthbox" href="http://placehold.it/500x620.png"> <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> <div class='text-center'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox " rel="ligthbox" href="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" title="Electrical Power Lines and Pylons disappear over t.. (pautliubomir)"> <img class="img-responsive" alt="" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /> <div class='text-right'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> <div class='text-right'> <small class='text-muted'>Image Title</small> </div> <!-- text-right / end --> </a> </div> <!-- col-6 / end --> </div> <!-- list-group / end --> </div> <!-- row / end --> </div> <!-- container / end -->

.gallery { display: inline-block; margin-top: 20px; } .thumbnail img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); margin-bottom:20px; } .thumbnail img:hover { filter: none; /* IE6-9 */ -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ } .thumbnail{ border:none; }

$(document).ready(function(){ //FANCYBOX //https://github.com/fancyapps/fancyBox $(".fancybox").fancybox({ openEffect: "elastic", closeEffect: "elastic", helpers : { title : { type: 'over' }, thumbs : { width : 50, height : 50 } } }); });