NiceSnippets.com
Bootstrap lightbox example with image gallery
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;
}
