"Gallery Complete"
Bootstrap 3.3.0 Snippet by psantos

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Bootstrap Gallery</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html --> <div class="container gallery"> <ul class="thumbnails"> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="img/pics/1.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/2.jpg"><img class="group1" src="img/pics/2.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/3.jpg"><img class="group1" src="img/pics/3.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/4.jpg"><img class="group1" src="img/pics/4.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/5.jpg"><img class="group1" src="img/pics/5.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/6.jpg"><img class="group1" src="img/pics/6.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/7.jpg"><img class="group1" src="img/pics/7.jpg" title="Image Title" /></a> </li> <!--end thumb --> <li class="span3"> <a class="thumbnail" rel="lightbox[group]" href="img/pics/8.jpg"><img class="group1" src="img/pics/8.jpg" title="Image Title" /></a> </li> <!--end thumb --> </ul><!--end thumbnails --> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/plugins.js"></script> <script src="js/jquery.prettyPhoto.js"></script> <script src="js/main.js"></script> <script> $(document).ready(function(){ $("[rel^='lightbox']").prettyPhoto(); }); </script> </body> </html>
@import 'prettyPhoto.css'; /* ========================================================================== Author's custom styles ========================================================================== */ body { background: url('../img/black_lozenge.png') repeat; } .centered { margin: auto auto; display: block; width: 185px; margin-bottom: 25px; } .thumbnail { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 1px solid #444; } .thumbnail img { opacity: .75; } .thumbnail img:hover { opacity: 1; } .gallery { color: #fff; } .gallery h2 { font-family: 'Yesteryear', arial, helvetica, sans; color: #eee; text-align: center; margin-bottom: 15px; font-size: 4.5em; font-weight: 200; line-height: 1.65em; border-bottom: 1px solid #000; text-shadow: 3px 4px 0px rgba(0, 0, 0, 0.76); } .credits a { margin-right: 15px; color: #555; border: 1px solid #000; padding: 5px 15px; background: rgba(0, 0, 0, 0.45); } .credits a:hover { color: #999; text-decoration: none; background: #000; }
$('#source').quicksand( $('#destination li') );

Related: See More

Paper Dashboard React
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Portfolio Gallery with filtering category

Questions / Comments: