Create a LightBox Gallery using CSS & jQuery

In this tutorial you will learn how to create a simple gallery with lightbox effect using CSS & jQuery.

lightbox tutorial with css jquery

Steps to Implement the Lightbox Effect:

  • Download and include jQuery
  • Make Image Gallery
  • Make Lightbox Display Block
  • Use Stylesheet code to position and hide the Lightbox Block
  • Use jQuery Code for Lightbox Effect

Step 1: Download and include jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a lightweight “write less, do more” JavaScript library.  Two versions of jQuery are available for downloading: one minified and one uncompressed (for  debugging or reading). Both versions can be downloaded from  jQuery.com.

After download the jquery library we will have to include jQuery inside the <head> tags. Here’s the code:

<script type=”text/javascript” src=”jquery.js” ></script>

 

There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file. This can be done by adding src attribute to the script tag. Here is the code:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” ></script>

 

Step 2: Make the Image Gallery 

Each img element must have class attribute having value “thumbnail”. We will use this class later with jQuery to trigger the Lightbox Effect.

    <div>
<img src=”images/ferrari1.jpg” width=”120″>
<img src=”images/ferrari2.jpg” width=”120″>
<img src=”images/ferrari3.jpg” width=”120″>
</div>

 

Step 3 : Make the Lightbox Display Block

The Lightbox Display Block consist of two div elements.

  • First div element with id="popup" having a black background color and spans across the screen.
  • Second one with id="center" is inside the first div element where the clicked image will be displayed.

The img tag with id="lightbox" will be replaced by the image that you click on the image gallery. The img tag with id="close" will be used as the close button for the Lightbox Effect.

    <div id=”popup”>
<div id=”center”>
<img id=”lightbox” src=”images/ferrari1.jpg” >
<img id=”close” src=”images/close.png” alt=”close” >
</div>
<!– #center –>
</div>
<!– #popup –>

Step 4 : Use the CSS code to position and hide the Lightbox Block

The Lightbox is only visible when someone clicks any image in the gallery. Rest of the time it is hidden. We will use CSS display property to hide the Lightbox. Here’s the CSS Stylesheet codes for the Lightbox Block:

<style type=”text/css”>
<!–
#popup{
background:#000000;
height:100%;
width: 100%;
position:fixed;
top: 0;
left: 0;
display: none;
}
#center{
border: 10px solid #121212;
margin: 6% auto;
width: 750px;
}
#close{
float: right;
position: absolute;
top: 12%;
}
–>
</style>

 

Step 5: Use the jQuery code for the Lightbox Effect

The jQuery will detect click on the image inside the Image Gallery. Then it replaces the value of src attribute of the <img id="lightbox" src="..." > with the src of the clicked image in the gallery. Heres the jQuery Code:

<script type=”text/javascript” >
$(document).ready(function(){
$(“.thumbnail”).click(function(){
var address= $(this).attr(“src”);
$(“#popup”).fadeIn(“slow”);
$(“#lightbox”).attr(“src”,address);
});
$(“#close”).click(function(){
$(“#popup”).fadeOut(“fast”);
});
});
</script>

 

$(document).ready(function(){

  • Is used to detect any clicks on the image with class="thumbnail" in the Image Gallery .

var address= $(this).attr(src);

  • Assigns the src value of clicked image to the address variable.

$(#popup).fadeIn(slow);

  • The <div id="popup"> will fade in slowly into the view.

$(#lightbox).attr(src,address);

  • This will replace the src attribute of the image having id="lightbox" with the value assigned to the address variable.

$(#close).click(function(){

  • For detecting click on an element with id="close".

$(#popup).fadeOut(fast);

  • For deactivating the Lightbox div having id="popup" with a fadeout effect.

 

Its time to test and enjoy the tutorial package. You can download the full package of the tutorial by Clicking Here.

Source Tutorial is from http://www.entheosweb.com/

 

Author Info