jQuery Light Box | Lessoncup Programming Blog

Saturday, 2 November 2013

jQuery Light Box

HI, Today i am going to show you about jquery light box. we have lot of inbuilt plugins like fancy-box, light-box but i am not using any plugins to make this, i have done this using just jquery and CSS code and it is very simple to do, and you can make this to your websites very easily.



HTML

take the list of images using LI tag, here we want to show the big thumb while click on same small thumb, in every Image tag put the big thumb name in alt tag, this way the big thumb will not show and later we use this big thumb name using jquery, now take one div and give a name 'box' to display the big thumb and put it in hide mode, take one more div to blur the background while open the big thumb put it in hide mode. and more div for close button.

<div class="shadow"></div>

<div id="lessoncup">

<div class="box"></div>

<div class="closebtn">Close</div>

<ul>
    <li>
      <div class="image">
      <img src="flower-desktop-wallpaper-640x400.jpg" id="img" class="img" alt="one.jpg"/> 
    <div class="caption">
    Cute Girl Sitting on Bench
    </div>
   </div>
    </li>
        
        
    <li>
        
    <div class="image">
          
       <img src="happy-girl-in-spring.jpg" id="img" class="img" alt="two.jpg"/>
          <div class="caption">
    Sad Girl
    </div>
          
    </div>
    </li>
    
    <li>
      <div class="image">
 <img src="HD-Wallpapers-For-Background-8.jpg" id="img" class="img" alt="four.jpg"/>
      <div class="caption">
    Smiling Gril
    </div>
   </div>
    </li>
        
        
    <li>
        
    <div class="image">
          <img src="Maltese-Puppy-Wallpaper-640x400.jpg" id="img" class="img" alt="three.jpg"/>
          <div class="caption">
    Playing Girl
   </div>
          
    </div>
    </li>
    
     
    
    </ul>


</div>

CSS

write the css to show the list of images and set the styles to box, shadow and closebtn div's, make sure you should maintain the depth of DIV's using z-index and use position:absolute
ul{ list-style:none; margin:0; padding:0;}

li{float:left; width:300px; height:290px; margin:0 50px;}

.image{
 cursor:pointer;
 overflow:hidden;
 position:absolute;
 border:solid #CCC 5px;
 height: 250px;
 width: 300px;
}


.caption {
 width:100%;
 height:18px;
 background-color: rgba(0,0,0,0.5);
 padding:10px;
 position: absolute;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out; 
  transition: all 0.5s ease-out;

}

.image:hover .caption {
 -moz-transform: translateY(-100%);
 -o-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
}

.box{width:700px; height:400px; margin:50px 45px;z-index:1; border:solid  #EAEAEA 10px; display:none; position:absolute; background-color:#333; overflow:hidden;}

.shadow{background-color:rgba(0,0,0,0.80); width:100%; height:100%; position:absolute; z-index:1; display:none;}

.closebtn{padding:10px;background-color:#F60; position:absolute; cursor:pointer; text-transform:capitalize;display:none; z-index:3;
margin:60px 0 0 55px;}

jQuery

write the click function to image class .img and access the big thumb name from alt tag using attr() method and using show() method display the .box .shadow and .closebtn div's, to display the big thumb in box div, take src variable and store the big thumb name and use .html() method to append the image tag and pass the src variable to image src attribute.

To Close the BIG Thumb DIV
write the click function to .closebtn div inside the function just hide the all elements using .hide() method except list of images
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.img').click(function(){
  
  var src=$(this).attr('alt');
  
  $('.box').show();
  
  $('.closebtn').show();
  
  $('.box').html('<img src='+src+'>');
  
  $('.shadow').show();
  
 });
 
 
 
 $('.closebtn').click(function(){
  
  $('.box').hide();
  $('.closebtn').hide();
  $('.shadow').hide();
  
 });
 
 
 
});

</script>


Live Demo   Download Script

2 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons