Web Tutorial: The Lightbox Effect (Part 2/2)

You've created the layout for your Lightbox, you've managed to get it to display content dynamically. What's next? Why, the fun part - making it look good. The cake's already done, all you're doing today is adding the icing.

So add this to your CSS class content_wrapper.

            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:hidden;
                margin-top:50px;
                margin-left:auto;
                margin-right:auto;
                background-color:#FFFFFF;
                border-radius:9px;
            }

What happened there?

You gave your Lightbox cute round corners. Now the next part is slightly trickier. The Lightbox currently appears and disappears without much fanfare. We're going to change that with some CSS3 animation.

Add a couple more lines to your CSS class content_box and make the following changes.

            .content_wrapper
            {
                width:1px;
                height:1px;
                border:1px solid #777777;
                overflow:hidden;
                margin-top:50px;
                margin-left:auto;
                margin-right:auto;
                background-color:#FFFFFF;
                border-radius:9px;
                -webkit-transition: width 0.5s, height 0.5s; /* For Safari 3.1 to 6.0 */
                transition: width 0.5s, height 0.5s;
            }

What this does, is ensure that when your Lightbox's width and height changes, it'll do so at a measured rate. We also set the width and height properties to 1px at the start.

For more on CSS Transitions, follow this link. (http://www.w3schools.com/css/css3_transitions.asp)

Now, it's time to modify the JavaScript.

            function open_lb(varid)
            {
                document.getElementById("wrapper").style.display="block";                       
               
                setTimeout(function(){document.getElementById("lb_wrapper").style.width="80%";document.getElementById("lb_wrapper").style.height="80%";},100);               
                setTimeout(function(){document.getElementById("lb_content").innerHTML=content[varid];},200);
            }

The last two lines define a timer function to set the lb_wrapper div's height and width properties (which we initially set to 1px) to 80%. This, coupled with the transition specifications we added to the content_wrapper class earlier, ensures that your Lightbox makes a nice slow entrance.

Here's some more material on JavaScript timing functions! (http://www.w3schools.com/js/js_timing.asp)

Why do we need Timer functions for this? Can't we just get it done instantaneously?

For a more detailed explanation, please refer to Establishing a Transition Sequence in CSS3.

OK, we're going to do the same for the Lightbox closing.

            function close_content()
            {           
                document.getElementById("lb_wrapper").style.width="1px";
                document.getElementById("lb_wrapper").style.height="1px";               
                setTimeout(function(){document.getElementById("wrapper").style.display="none";},500);           
            }

And we're done! Easy, wasn't it?

Test out your Lightbox now. Does it pop up nicely and disappear nicely? It's one of those very neat but simple tricks that you don't need clunky jquery libraries for.

Seeya. Time to "x close" this chapter,
T___T