Chill out and play some games on The Flash Core
Jan
30

Simple CSS Lightbox

in Blog, CSS, JavaScript, XHTML with 6 Comments | Trackback

With this tutorial you will be able to create a lightbox effect like this with some simple web code.

This will be my first tutorial written with WP-Syntax, a syntax highlighting plug-in written by Ryan McGeary.

First you need to make sure the ol’ Javascript is enabled, so head on over to this page to have a wee check and change your settings if need be.

Now then, the first part I’ll show you is the CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}

Lines 2 and 14: hides the elements by default (these will be overwritten later with Javascript).
Lines 3-7 and 15-19: sets the position and dimensions of the elements. Position should be either fixed or absolute. The other values can be either px (pixel), % (percentage) or em values.
Lines 9-11: sets 50% opacity in most browsers (if it doesn’t work in yours it will probably just show a matte black background when the lightbox shows up).

And the HTML:

1
2
3
4
5
6

<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Lines 1 and 5: the Javascript links that will show and hide the lightbox in your browser. They find the id attributes of the two div elements and reset their display style.

Put both of these together, enclosing the CSS in a style tag, and you get something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<style type="text/css">
#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}
</style>
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Other examples:

You can also close the box by clicking outside of it, instead of having to click on the link. View this page to see how it works.

This is a page with the position of lightbox set to absolute.
And this is one set to fixed.
Scroll down each page to see what happens.

If you are interested in seeing the code involved in making these pages, you can view their page source (usually by pressing Ctrl + U or from within the View menu).

Remember, the values inside the CSS are mostly just numbers, so have a play around with them and see what they do.

6 Responses to “Simple CSS Lightbox”

Feed Me!
  1. Jake says:
    March 8, 2011 at 12:51 pm

    how do you put a image on it where to write and what to write?

    Reply
    • Stephen McIntyre says:
      April 14, 2011 at 3:12 am

      You can change the content inside the "lightbox" DIV to whatever you like from the original "Close" link. The element is at the bottom of the script, and you’re looking to replace it with something like this:


      <div id="lightbox">
      <img src="/path/to/image.jpg" alt="Your Image" width="100" height="100" />
      </div>

      Reply
  2. Gustavo says:
    April 10, 2011 at 1:43 am

    Gostei!
    Tinha uma galeria de imagens que usava jQuery, porém ela não habilitava o aumento da imagem selecionada.
    Adicionei o seu código e funcionou!!
    Parabéns pelo Post!!
    (São Paulo- Brazil)

    Reply
    • Stephen McIntyre says:
      April 14, 2011 at 3:57 am

      Translated from Portuguese to English with Google Translate:

      “I liked it!
      He had a gallery of images that used jQuery, but it did not empower the growth of the selected image.
      I added your code and it worked!
      Post Congratulations!
      (São Paulo-Brazil)”

      Glad you liked the post, thanks for stopping by! :)

      Reply
  3. Arngrím says:
    August 2, 2011 at 1:32 pm

    Hi there, finally a code that I could understand ;o)
    I´m new at this.
    Problem is though that we have a “slideshow” running on our “home” page and it comes through the Lightbox.
    Is there any way to prohibit this?

    The link for the Lightbox is in the lower right corner under Arngrím guitarist “About”.

    I have an Idea to send the Lightbox a little to the left to solv the problem, but it´s way nicer if it is in the center.

    Thank you for this simple code!

    Arngrim

    Reply

Leave a Reply