Friday, January 6, 2012

Lightbox without jQuery -- soooooooo simple


Lightbox is like a modal dialog which usually pops up to display images. It looks fancy and more websites are now using it. Most of the tutorials on creating a Lightbox is by using jQuery. But the magic of Lightbox has nothing do with jQuery. It is the *CSS position property* that plays the key. All you need are two things:

1) a style sheet for the lightbox:
   .lightbox {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0, 0, 0, .8);
   }

2) the lightbox:
   <div class="lightbox">
      <img src="any-image-url" />
   </div>

Those are the backbone of the lightbox.

Certainly, they are of no practical use yet. A real lightbox usually appears when the reader clicks on something, e.g. a button. Secondly, it looks much better if the image in the lightbox is centered. These are not special techniques for lightbox and there are tons of solutions. Here is one example.

To open and close the lightbox:

1) Assign the lightbox an ID and hide it when loaded; Clicking on it will close itself:
<div id="lightbox" class="lightbox" style="display:none"
      onclick="document.getElementById('lightbox').style.display='none';">
</div>

2) Add a button to show the lightbox:
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>

To center the image in the lightbox:

Centering an element horizontally is easy while doing it vertically is very tricky. Since the CSS vertical-align property works only in table cells, we use a *table* to wrap the content in the lightbox.

The style sheet for the table:

.lightbox_table {
    width:100%;
    height:100%;
}

.lightbox_table_cell {
    vertical-align:middle;
}

The table inside the lightbox:

<table class="lightbox_table">
<tr>
<td class="lightbox_table_cell" align="center">

<div id="lightbox_content" style=
       "width:300px; background-color:white; border:5px solid black;">

   <img src="any-image-url" />

</div>

</td>
</tr>
</table>

You can see a live example by click on the following button.



Here is the whole thing of this example.

<html>
<head>
<style>

.lightbox {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .8);
}

.lightbox_table {
    width:100%;
    height:100%;
}

.lightbox_table_cell {
    vertical-align:middle;
}

</style>
</head>

<body>
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none"
      onclick="document.getElementById('lightbox').style.display='none';">

   <table class="lightbox_table">
   <tr>
   <td class="lightbox_table_cell" align="center">
      <div id="lightbox_content" style=
            "width:300px; background-color:white; border:5px solid black;">

         <p>Click anywhere to close the lightbox.</p>
         <p>Use Javascript to insert anything here.</p>

      </div>
   </td>
   </tr>
   </table>

</div>
<!-- LIGHTBOX CODE END -->

</body>
</html>


19 comments:

raaz shrestha said...

Really appreciated the work dude. it is the best lightbox without using the jquery. keep it up dude. raaz

JGONZALEZD said...

Dude, you just rock! I've been dealing with jQuery two days now.

Thank you so much.

Greetings from Colombia - South America.

Anonymous said...

Love it

Anonymous said...

You should get a medal!
From Finland with love!

Anonymous said...

very good and simple, works on the major computer browsers.

one could also add some animation using setInterval() function, if he was inclined to do that.

Anonymous said...

This, is properly beautiful. Thank you!!

Histerius said...

Such simple solutions are beauty of computer programming.

Dan said...

Elegant, streamlined, and very much appreciated. If you're ever in Northern California, I'm buying you lunch.

GeMir said...

Thank you very much!

Anonymous said...

Is it possible to substitute the button for an image? I'm trying to have an image pop up a youtube video in the lightbox. Any ideas? Thanks in advance.

Anonymous said...

Hello, is it possible to put your code twice in the same page but with different content? Thank you in advance!

Anonymous said...

Hi,
I`m doing a research on how to make a lightbox without using a library but only using javascript. Is this one? .... i have been looking every where for one but can`t seem to find one.. please help

Sudipta Saha said...

hi
in this example js is not needed.so is this proper lightbox example?i want a form open in lightbox effect
with buffering.please help me to do it

Carlos Kaval said...

Excellent!

Anonymous said...

Great! Thank you!

Floristotle said...

Great! I really like it.

How come we have to apply the .lightbox styles to a seperate div wrapping the table? I've tried applying the styles directly to the table, but no luck.

Sort of the same question for the inner most div. Why is it needed? Why can't we leave it out?

Floristotle said...

Thank you!

Questions: How come we have to apply a wrapping .lightbox div? Why does it not work to apply those styles directly to the table?

A similar one: why is the inner most div necessary?

Please enrich our understanding of CSS flow <3

Floristotle said...

Putting max-width on an image in the table cell does not work in firefox unfortunately. Is there an other way to prevent an image from overflowing the screen width on smaller devices?

Anonymous said...

Amazing! Thank you so much!

 
Get This <