In this snippet we explain how to use lightbox in gallary. here we create one gallary and you can click on thumbnail image then open one popup then you can see original image in popup. in this popup you can see the next previous button that means you can show all other image using this button. you can easaly implement lightbox in your project.

We allows to free snippets of bootstrap lightbox gallery , you can download full code of bootstrap lightbox popup layout. Here in this post i will give you example of bootstrap fancybox snippet and you will get simple code of html, css and jquery. In lightbox gallery jquery snippet i give you three tab with html, css and js, you can easily get code of .... layout.


<!DOCTYPE html> <html lang="en"> <head> <title>LightBox</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-media-lightbox.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="js/bootstrap-media-lightbox.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-3 text-center"> <a class="lightbox" href="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg" title="This is a sea" > <img src="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg" class="img-thumbnail" /> </a> </div> <div class="col-md-3 text-center"> <a class="lightbox" href="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg" title="This is a sea" > <img src="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg" class="img-thumbnail" /> </a> </div> </div> <br> <div class="row"> <div class="col-md-3 col-md-offset-3 text-center"> <a class="lightbox" href="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855_960_720.jpg" title="This is a lake" > <img src="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855_960_720.jpg" class="img-thumbnail" /> </a> </div> <div class="col-md-3 text-center"> <a class="lightbox" href="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855_960_720.jpg" title="This is a lake" > <img src="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855_960_720.jpg" class="img-thumbnail" /> </a> </div> </div> </div> <script type="text/javascript"> jQuery('.lightbox').lightbox(); </script> </body> </html>
#bootstrap-media-lightbox-caption-container { position: absolute; bottom: 10px; padding: 0 20px; width: 100% } #bootstrap-media-lightbox-caption { background: none repeat scroll 0% 0% #000; color: white; padding: 7px 15px; border-radius: 30px; width: 100% } #bootstrap-media-lightbox-backward { position: absolute; top: 45%; left: 20px; font-size: 300%; color: white; cursor: pointer; } #bootstrap-media-lightbox-forward { position: absolute; top: 45%; right: 20px; font-size: 300%; color: white; cursor: pointer; } #bootstrap-media-lightbox-close { position:absolute; top:10px; right:20px; cursor: pointer; } #bootstrap-media-lightbox-close .glyphicon-remove-circle { color:white; font-size: 180%; } #bootstrap-media-lightbox-close .glyphicon-remove-circle { color:white; font-size: 180%; } #bootstrap-media-lightbox-close .fa-stack { font-size: 180%; } #bootstrap-media-lightbox-close .fa-square { color:#696969; }




Random Post




Related Post

Our team section layout design in bootstrap

Our team section layout design in bootstrap

Ready Code of Our team section layout design in bootstrap css framework

Read More
Bootstrap round shape step by step wizard

Bootstrap round shape step by step wizard

Simple Step by step tab using css and Bootstrap framework

Read More
How to create custom with stylish bootstrap step tabs

How to create custom with stylish bootstrap step tabs

Bootstrap step example using custom js and css with stylish design. you can get code of step by step form in bootstrap snippet. we give you example of multi...

Read More