CSS Lightbox Effect

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

Click on the Images below to view the Lightbox Effect.

Browser Support	»
Language	»	CSS3, jQuery & HTML4
Difficulty	»	Intermediate
Estimated Completion Time	»	20 minutes

Steps to Implement the Lightbox Effect

We'll follow these steps to apply the fonts to your webpage.

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 & 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 ‹.

We will have to include jQuery inside the <head> tags.
Here's the code:

<head>

   <script type=text/javascript src=jquery-1.5.2.min.js ></script>
 
</head>

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.
Set the value of src attribute to "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";

<head>

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

Step 2 : Make the Image Gallery

All the images are inside a single div element.
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 class=thumbnail width="120">
   <img src=images/ferrari2.jpg class=thumbnail width="120">
   <img src=images/ferrari3.jpg class=thumbnail 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>

The Explanation

[For <div id="popup"> ]
Line 3 › #popup{
→ Id Selector name for the main Lightbox div .

Line 4 › background:#000000;
→ Black background color for <div id="popup">.

Line 5 and Line 6 › height: 100% ; width: 100% ;
→ Height and Width is set to 100% to cover the entire screen.

Line 7 › position: fixed;
→ This property will position the div with id="popup" relative to the browser window.
→ To position the element in the same spot on your screen even if you scroll up/down the page.

Line 8 and Line 9 › top: 0 ; left: 0 ;
→ To position the <div id="popup"> from the top-left corner .

Line 10 › display: none ;
→ To hide the <div id="popup">, display property is set to none.
→ By Default this popup div will not be displayed to the user.

[For <div id="center">]
Line 12 › #center{
→ The selector id of the div.
→ The clicked image will be shown here.

Line 13 › border: 10px solid #121212 ;
→ For 10 pixel solid style Dark Grey Border Color.

Line 14 › margin: 6% auto ;
→ To position the div id="center" at the center of the screen.

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>

The Explanation

Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

[For Activating Lightbox]
Line 4 › $(.thumbnail).click(function(){
→ For Detecting any clicks on the image with class="thumbnail" in the Image Gallery .

Line 5 › var address= $(this).attr(src);
→ Assigns the src value of clicked image to the address variable.

Line 6 › $(#popup).fadeIn(slow);
→ The <div id="popup"> will fade in slowly into the view.

Line 7 › $(#lightbox).attr(src,address);
→ This will replace the src attribute of the image having id="lightbox" with the value assigned to the address variable.

[For Deactivating Lightbox]
Line 9 › $(#close).click(function(){
→ For detecting click on an element with id="close".

Line 10 › $(#popup).fadeOut(fast);
→ For deactivating the Lightbox div having id="popup" with a fadeout effect.

Click here to download the Demo

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.