Create a Simple jQuery Lightbox

lightbox_featured

In this tutorial I will show you how to create a nice page overlay effect to easily display extra info for the user without redirecting the user to a new page. Have a look at the Demo page to have an idea about what we are about to create.

I know that there are some ready made plugins to achieve this, but this tutorials aims to teach you how the whole thing works so you can create your own customized overlays for your websites. With this you can easily change the size, background colors, div position etc.

To fully understand this tutorial you need to have a very basic knowledge of jQuery and CSS.

Ok, Let’s get started.

For this tutorial first we need to have a hidden DIV with its opacity set to 0.75 so it gives the nice transparent look. To overlay the div, a proper z-index value is needed. We would also need two links with unique ID’s to be able to trigger the open and close events. That’s all. Here is how:

CSS for the overlay div and the div that will hold the extra info we need to show.

#overlay {
opacity: 0;
background-color: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 50;
width: 100%;
height: 100%;
display:none;
}

#info {
margin:auto;
padding:20px;
width:400px;
background:#fff;
box-shadow: 0 4px 16px #999;
z-index: 51;
border:1px solid #acacac;
position:absolute;
display:none;
}

A link with id=open to obviously show the overlay and another one with id=close to terminate it.

<a id="open" href="#">More info</a>
<a id="close" href="#">Close</a>

Those two links can be easily called by jQuery to perform the appropriate action. The following jQuery code does the magic.

$(document).ready(function(){
  $("#open").click(function(){
     $('#overlay, #info').animate({'opacity':'0.7'}, 300, 'linear');
     $('#info').animate({'opacity':'1.00'},300,'linear');
     $('#overlay, #info').css('display','block');
     $('#info').css({'left':(($(document).width()/2)-($('#info').width()/2))});
     $('#info').css({'top':(($(document).height()/2)-($('#info').height()/2)-50)});
  });

  $('#close').click(function(){
     $('#overlay, #info').animate({'opacity':'0'},300,'linear', function(){
     $('#overlay, #info').css('display','none');
   });
  });
});

The above code handles the open and close clicks by controlling the opacity and display properties of the #overlay and #info divs. To add a nice easing effect I used the animate() method.

To center the info div I have dynamically set the values for the top and left attributes by determining the width and height of the page and then doing some smart calculations. With this code you are sure that the info div will always appear on the center for the page.

Do not forget to include the jQuery library.

DemoDownload

I hope you have enjoyed this simple tutorial.

Create a Simple jQuery Lightbox
11 votes, 3.73 avg. rating (75% score)
  • Posted in: JavaScript & jQuery
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • Hakan Bilgin

    Thanks for share this sweet effect.
    I gonna use it in my pages.
    Please continue sharing JQuery codes.

    :)

    Hakan Bilgin

    • Husamaldin Tayeh

      Glad that you found this helpful. Enjoy

  • Esam

    although I am now aware of java scripting, I thank you for your efforts .. keep going on :)

    • Husamaldin Tayeh

      Thanks a lot

  • Esamdrsh

    ok .. that is good , next

    • Anonymous

      thanks Esam

  • http://twitter.com/StephenDOliver Stephen Oliver

    Which JQuery library (asking as a complete JQuery newbie) should we include? Also, how are the hidden div and visible div laid out?

    • http://www.codersmount.com/ Husamaldin Tayeh

      Hi Stephen,

      You only need to include the jQuery library no need for any other jQuery plugins for this tutorial.

      As for the divs they are positioned and laid out using the CSS I included and explained in the tutorial. There are two main divs one called “overlay” and that acts as the transparent layer covering the page and the other div is called “info” which acts as box to hold the information you want to display for the user.

      Downloading the code should give you a clear idea about how the different components are linked and how each one works.

      I hope this was helpful to you.