Basic Fullscreen Image Lightbox & Gallery Plugin For jQuery
File Size: | 1.28 MB |
---|---|
Views Total: | 2497 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal and simple to use jQuery plugin to present zoomed images in a fullscreen, navigatable lightbox gallery.
How to use it:
1. Add a list of images to your web page.
<div class="img-box"> <ul> <li> <img src="images/pic-1.png"> <div class="mask"> <div class="mag"> <div class="plus"></div> </div> </div> </li> <li> <img src="images/pic-2.png"> <div class="mask"> <div class="mag"> <div class="plus"></div> </div> </div> </li> <li> <img src="images/pic-3.png"> <div class="mask"> <div class="mag"> <div class="plus"></div> </div> </div> </li> ... </ul> </div>
2. The core CSS styles for the gallery lightbox.
.img-box { position: relative; width: 1200px; height: 530px; } .img-box ul { width: 1200px; height: 530px; } .img-box ul li { position: relative; width: 300px; height: 200px; float: left; } .img-box ul li img { position: relative; width: 100%; height: 100%; } .mask { position: absolute; top: 0; z-index: 9; width: 100%; height: 100%; background: #000; opacity: .2; display: none; } .mag { position: relative; z-index: 99; width: 20px; height: 20px; border-radius: 15px; margin: 85px auto; border: 5px solid #fff; } .mag:after { position: relative; top: 16px; left: 23px; display: block; content: ""; width: 6px; height: 15px; background: #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .plus { position: relative; top: 7.5px; left: 4px; width: 12px; height: 3px; background: #fff; -webkit-animation: round 2s; -moz-animation: round 2s; animation: round 2s; } .plus:after { position: relative; content: ''; display: block; width: 12px; height: 3px; background: #fff; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } @-webkit-keyframes round { 0% { -webkit-transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg) } } @-moz-keyframes round { 0% { -moz-transform:rotate(0deg) } 100% { -moz-transform:rotate(360deg) } } @keyframes round { 0% { transform:rotate(0deg) } 100% { transform:rotate(360deg) } } .full-screen-mask { width: 100%; height: 100%; position: fixed; top: 0; z-index: 999; background: url(../images/bg.png); display: none; } .view-port { position: relative; width: 700px; height: 450px; background: #fff; margin-left: auto; margin-right: auto; border-radius: 5px; } .close { display: block; position: absolute; top: 20px; left: 90%; content: ''; width: 50px; height: 50px; border: 1px solid #5f5e5e; border-radius: 5px; } .close span { position: absolute; display: block; width: 50px; height: 2px; background: #5f5e5e; margin: 24px auto; } .close span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .close span:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .pre { position: relative; top: 25px; width: 50px; height: 400px; float: left; -webkit-user-select: none; -moz-user-select: none; } .pic { position: relative; top: 25px; width: 600px; height: 400px; float: left; } .next { position: relative; top: 25px; width: 50px; height: 400px; float: left; -webkit-user-select: none; -moz-user-select: none; } .pre span, .next span { display: block; width: 25px; height: 45px; background: #2b2b2b; margin-top: 177px; line-height: 40px; text-align: center; font-size: 30px; color: #fff; cursor: pointer; } .next span { margin-left: 25px; }
3. Include the jQuery library on your web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
4. The JavaScript to active the gallery lightbox.
/*2015.7.22*/ $(document).ready(function(){ // image list $(".img-box ul li").hover( function(){ $(this).children(".mask").css({"display":"block"}) }, function(){ $(this).children(".mask").css({"display":"none"}) }); // fullscreen mask var wHeight = $(window).height(); var eHeight = $(".view-port").height(); var mTop = (wHeight-eHeight)/2; $(".view-port").css({"marginTop":mTop+"px"}); // popup mask $(".img-box li").click(function(){ $(".full-screen-mask").css({"display":"block"}); }); // close button $(".close").click(function(){ $(".full-screen-mask").css({"display":"none"}); }); // display images $(".img-box ul li").click(function(){ var index = $(this).index(); num = index+1; $(".pic img").attr("src","images/pic-"+num+".png") }); // previous function pre(){ $(".pic img").attr("src","images/pic-"+num+".png"); num--; if(num==0){ num=8 } } $(".pre").click(pre); // next function next(){ $(".pic img").attr("src","images/pic-"+num+".png"); num++; if(num==9){ num=1 } } $(".next").click(next); });
This awesome jQuery plugin is developed by pengzhiqiang. For more Advanced Usages, please check the demo page or visit the official website.