Lightbox CSS and jQuery Plugin

HTML
<div class="cont"> <div class="page-head"> <h1>Lightbox CSS / jQuery</h1> <p class="lead">A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.</p></div> <div class="demo-gallery"> <ul id="lightgallery"> <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/1-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/1-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/1.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/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://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"> <div class="demo-gallery-poster"> <img src="http://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/2-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/2-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/2.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/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://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg"> <div class="demo-gallery-poster"> <img src="http://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/13-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/13-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/13.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/img/13-1600.jpg" data-sub-html="<h4>Sunset Serenity</h4><p>A gorgeous Sunset tonight captured at Coniston Water....</p>"> <a href=""> <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-13.jpg"> <div class="demo-gallery-poster"> <img src="http://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/4-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/4-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/4.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/img/4-1600.jpg" data-sub-html="<h4>Coniston Calmness</h4><p>Beautiful morning</p>"> <a href=""> <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-4.jpg"> <div class="demo-gallery-poster"> <img src="http://sachinchoolur.github.io/lightGallery/static/img/zoom.png"> </div> </a> </li> </ul> <span class="small">Click on any of the images to see Lightbox</span> </div> </div>
CSS
body { background-color: #152836; color: #eee; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif } .small { font-size: 11px; color: #999; display: block; margin-top: -10px } .cont { text-align: center; } .page-head { padding: 60px 0; text-align: center; } .page-head .lead { font-size: 18px; font-weight: 400; line-height: 1.4; margin-bottom: 50px; margin-top: 0; } .btn { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: normal; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; } .btn-lg { border-radius: 2px; font-size: 18px; line-height: 1.33333; padding: 10px 16px; } .btn-primary:hover { background-color: #fff; color: #152836; } .btn-primary { background-color: #152836; border-color: #0e1a24; color: #ffffff; } .btn-primary { border-color: #eeeeee; color: #eeeeee; transition: color 0.1s ease 0s, background-color 0.15s ease 0s; } .page-head h1 { font-size: 42px; margin: 0 0 20px; color: #FFF; position: relative; display: inline-block; } .page-head h1 .version { bottom: 0; color: #ddd; font-size: 11px; font-style: italic; position: absolute; width: 58px; right: -58px; } .demo-gallery > ul { margin-bottom: 0; padding-left: 15px; } .demo-gallery > ul > li { margin-bottom: 15px; width: 180px; display: inline-block; margin-right: 15px; list-style: outside none none; } .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; }
JAVASCRIPT
$(document).ready(function() { $('#lightgallery').lightGallery({ pager: true }); });
Expand for more options Login