Bootstrap snippet: Gallery with pagination

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: gallery,images



<div class="container"> <div class="row"> <div class="col-md-12"> <div id="grid" class="row"> <div class="mix col-sm-3 page1 page4 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/1" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page2 page3 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/2" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page3 page2 margin30 "> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/3" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page4 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/4" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page1 margin30 "> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/5" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page2 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/6" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page3 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/7" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> <div class="mix col-sm-3 page4 margin30"> <div class="item-img-wrap "> <img src="http://lorempixel.com/500/333/nature/8" class="img-responsive" alt="workimg"> <div class="item-img-overlay"> <a href="#" class="show-image"> <span></span> </a> </div> </div> </div> </div><!--grid--> </div> </div> <div class="row gallery-bottom"> <div class="col-sm-6"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </div> <div class="col-sm-6 text-right"> <em>Displaying 1 to 8 (of 100 posts)</em> </div> </div> </div>
body{margin-top:20px;} .margin30 { margin-bottom: 30px; } .item-img-wrap { position: relative; text-align: center; overflow: hidden; } .item-img-wrap img { -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -webkit-transition: all 200ms linear; transition: all 200ms linear; width: 100%; } /************************image hover effect*******************/ .item-img-wrap { position: relative; text-align: center; overflow: hidden; } .item-img-wrap img { -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -webkit-transition: all 200ms linear; transition: all 200ms linear; width: 100%; } .item-img-overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .item-img-overlay span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(http://bootstraplovers.com/templates/assan-2.2/main-template/img/plus.png) no-repeat center center rgba(0, 0, 0, 0.7); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -moz-transition: opacity 250ms linear; -o-transition: opacity 250ms linear; -webkit-transition: opacity 250ms linear; transition: opacity 250ms linear; } .item-img-wrap:hover .item-img-overlay span { opacity: 1; } .item-img-wrap:hover img { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } /*************pagination***********/ .gallery-bottom .pagination { margin-top: 0px; } .pagination > li > a, .pagination > li > span { background-color: #ccc; padding: 3px 9px; color: #fff; border: 0px; } .pagination > li > a { margin-right: 5px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #32c5d2; }
Dey-Dey

Gallery with pagination

Dey-Dey
  Jun 20th, 10:54
2.1K Views