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>
Posts
18 comments:
Really appreciated the work dude. it is the best lightbox without using the jquery. keep it up dude. raaz
Dude, you just rock! I've been dealing with jQuery two days now.
Thank you so much.
Greetings from Colombia - South America.
Love it
You should get a medal!
From Finland with love!
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.
This, is properly beautiful. Thank you!!
Such simple solutions are beauty of computer programming.
Elegant, streamlined, and very much appreciated. If you're ever in Northern California, I'm buying you lunch.
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.
Hello, is it possible to put your code twice in the same page but with different content? Thank you in advance!
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
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
Excellent!
Great! Thank you!
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?
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
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?
Amazing! Thank you so much!
Post a Comment