Basic Fullscreen Image Lightbox & Gallery Plugin For jQuery

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.