Minimalist jQuery Pictures Lightbox with jQuery

An easy as hell jQuery image lightbox script used to zoom out a list of pictures and display them into a popup window with next/prev controls.

How to use it:

1. Create the Html for a image lightbox template.

<div id="pop_up">
  <div id="pop_up_con" >
    <div id="left"> <img src="images/left.png"> </div>
    <div id="target"> <img  > </div>
    <div id="right"> <img src="images/right.png"> </div>
  </div>
</div>

2. Wrap your images into an Html unordered list. The plugin will organize and display them in an image slider-like gallery lightbox.

<ul id="pic_list">
  <li><img src="images/01.jpg"></li>
  <li><img src="images/02.jpg"></li>
  <li><img src="images/03.jpg"></li>
</ul>

3. The required CSS styles for the image lightbox. Add the following CSS snippets into your document and modify/tweak/override them to your design needs.

#pop_up {
  background: rgba(0,0,0,0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

#pop_up_con {
  width: 900px;
  position: absolute;
  height: 600px;
  left: 50%;
  top: 50%;
  margin-left: -450px;
  margin-top: -300px;
}

#target {
  width: 800px;
  height: 600px;
  float: left;
}

#target img {
  width: 100%;
  height: 100%;
}

#pic_list li {
  float: left;
  border: 3px solid #ffffff;
}

#pic_list li img { width: 215px; }

#left,
#right {
  float: left;
  height: 100%;
  width: 50px;
}

#left img,
#right img {
  margin-top: 275px;
  cursor: pointer;
}

#right { left: 50%; }

4. Load the necessary jQuery library in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

5. The jQuery script to enable the image lightbox.

$(document).ready(function(){
  var pop_up=$("#pop_up");
  var s_pic=$("#pic_list").find("li");
  len=s_pic.length;
  var imgArr=[];
  var index;
  for(var i =0; i<len; i++){
    imgArr[i]=s_pic.find("img").eq(i).attr('src');
  }
  s_pic.hover(function(){
    $(this).css({"border":"3px solid #ff7700"});
    

  },function(){
    $(this).css({"border":"3px solid #ffffff"});
  });
  s_pic.click(function(){
    pop_up.fadeIn();
    index = s_pic.index(this);
    $("#target").find("img").attr("src",imgArr[index]);
  });
  $('#pop_up').click(function(event) {
    if($(event.target).attr('id')=="pop_up"){
    $(this).fadeOut();
    }
  });
  $("#left").click(function(){
    index--;
    if(index<0){
      index=0;
      alert("this is fist photo" +index);
    }

    $("#target").find("img").attr("src",imgArr[index]);
  });
  $("#right").click(function(){
    index++;
    if(index>imgArr.length-1){
      index=imgArr.length-1;
      alert("this is last photo" +index);
    }
    $("#target").find("img").attr("src",imgArr[index]);
  });
})

---

This awesome jQuery plugin is developed by LEEHANWEI. For more Advanced Usages, please check the demo page or visit the official website.