tutorial #3: lightbox

Lightbox is used to overlay images (or other content) in a modal dialog window.

This demonstration features a photo gallery

In this demonstration, you will learn how to create a Lightbox. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you learn how to create the elements needed to make the Lightbox in HTML and CSS.

The How-To

HTML

                 
<div id="demonstration">

<ul>
                    
<li>
     
<a href="/img/sunset_over_river.png" class="lightbox">
<img src="img/sunset_over_river_thumbnail.png"
alt="Sunset over river">			 
</a>

</li>
     
<li>

<a href="img/evening_clouds.png" class="lightbox">
<img src="img/evening_clouds_thumbnail.png" alt="Evening Clouds"> 
</a>
      
</li>
     
<li>

<a href="img/Serene_cliff.png" class="lightbox">
<img src="img/Serene_cliff_thumbnail.png" alt="Stormy Field">		     
</a>
    
</li>
     
<li>

<a href="img/American_flag.png" class="lightbox">
<img src="img/American_flag_thumbnail.png"
alt="Folded American Flag">		     
</a>
 
</li>
     
<li>
      
<a href="img/Neighborhood_tiltshift.png" class="lightbox">
<img src="img/Neighborhood_tiltshift_thumbnail.png"
alt="Neighborhood in Tiltshift">
</a>
        
</li>
 
<li>
     	
<a href="img/hockey.png" class="lightbox">
<img src="lib/img/Hockey_thumbnail.png"
alt="Street Hockey Net">
</a>
   
</li>
                    
</ul>

</div>

CSS


#lightbox-wrapper {
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background:#000000 url(img/lightbox/loader.gif) no-repeat scroll 
center center;
}

#lightbox {
  position:absolute;
}

#demonstration ul li {
	display:inline-block;
	margin: 3px auto;
}

#demonstration ul li img {
	padding:5px;
}

jQuery

                
                
$(window).load(function(){//The webpage is loaded.
  $('a.lightbox').click(function(e) {//Triggers the click event.
    $('body').css('overflow-y', 'hidden'); //Will hide the scrollbars. 
    
    $('<div id="lightbox-wrapper"></div>')
    //Inserts a div with the attribute of"lightbox-wrapper".
      .css('top', $(document).scrollTop())
      //It tells the hidden pixels from the top page.
      .css('opacity', '0')//The opactiy at zero.
      .animate({'opacity': '0.5'}, 'slow')//Easing the speed of the opacity.
      .appendTo('body');
      
    $('<div id="lightbox"></div>')//Inserts a div with a "lightbox" attribute.
      .hide()//Hides the div with "lightbox".
      .appendTo('body');
      
    $('<img>')//Creates an image tag.
      .attr('src', $(this).attr('href'))//seting the source property.
      .load(function() {//Loads the image.
        positionLightboxImage();//Runs the function.
      })
      .click(function() {
        removeLightbox();
      })
      .appendTo('#lightbox');
    
    return false;//Stop the default element.
  });
});

function positionLightboxImage() {//set the height of the window object.
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  //Subtracts the height of the image.
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  //Subtracts the width of the image.
  $('#lightbox')//Assigns #lightbox.
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
}

function removeLightbox() {//Targets the function to remove the lightbox. 
  $('#lightbox-wrapper, #lightbox')
    .fadeOut('slow', function() {
      $(this).remove();
      $('body').css('overflow-y', 'auto');//The scrollbars returns.
    });
}//Close.