Gallery LightBox is a javascript library that allows the user create light box gallery. Gallery LightBox allows you to view images in full screen mode and it also create animated thumbnails for your gallery. You can navigate between images by clicking navigation arrows. In addition, you can add description information for images in your gallery. You can also zoom in or zoom out images and use auto play to display images in your gallery.
Features:
- Thumbnails support
- Fully Responsive
- FullScreen support
- Browser features control (scrollbar, mousewheel, right click prevention)
- Keyboard and mouse wheel support (navigate and zoom)
- Auto play
- Zoom In or Zoom out images
Live Demo
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet"
href="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/css/lightgallery.css" />
<style type="text/css">
.demo-gallery>ul {
margin-bottom: 0;
list-style: none !important;
}
.demo-gallery>ul>li {
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery>ul>li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery>ul>li a>img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery>ul>li a:hover>img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery>ul>li a:hover .demo-gallery-poster>img {
opacity: 1;
}
.demo-gallery>ul>li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery>ul>li a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery>ul>li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery>a>img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery>a:hover>img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img {
opacity: 1;
}
.demo-gallery .justified-gallery>a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery>a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark>ul>li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
</style>
2. HTML
Create a container where you want to render gallery
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<li class="col-xs-6 col-sm-4 col-md-3"
data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1.jpg 800"
data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-1600.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
<a href="">
<img class="img-responsive"
src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-1.jpg">
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3"
data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2.jpg 800"
data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-1600.jpg"
data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="">
<img class="img-responsive"
src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-2.jpg">
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3"
data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13.jpg 800"
data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-1600.jpg"
data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="">
<img class="img-responsive"
src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-13.jpg">
</a>
</li>
</ul>
</div>
3. Javascript
Load jQuery library together with the jQuery Gallery LightBox library into your code
<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/picturefill.min.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/lightgallery-all.min.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/jquery.mousewheel.min.js">
</script>
<script type="text/javascript">
$(function () {
$('#lightgallery').lightGallery();
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.