I searched far and wide to find a basic lightbox that was not only lightweight but easy to install. It was just one of those nice touches I wanted to add to my site but did not want to spend a lot of time doing so. Needless to say I could not find a simple solution so I spent some time and made my own.
This is broken down into a few small and simple sections, first the CSS which we will use to display our lightbox followed by the HTML and Javascript to activate it. In order for this to work correctly you must have script.aculo.us set up on your site.
A working demo may be seen by clicking here.
First we need to set up the CSS for the lightbox, you will have to modify it to suit your needs, this will draw a basic box with a border and allow room in the middle for content. We also create the background div which will encompass the entire screen so that when the lightbox is opened the page behind it will become inactive.
CSS:
position: fixed;
padding:10px;
width:500px;
height:300px;
color:#333;
background:#E1E1E1;
z-index: 9981;
}
#lightinner {
width:480px;
height:280px;
padding:10px;
border:1px solid #000;
background: #fff;
}
#fade {
position:fixed;
left:0;
top:0;
padding:0;
width:100%;
height:100%;
color:#333;
background:#000;
z-index: 9980;
}
A breakdown of the CSS from above:
Note: I have set the z-index very high to prevent anything else from appearing over the top of the lightbox.
Next we move on to the HTML, this is the easiest part and is very simplistic.
HTML
<div id="lightinner">This is where your content will go, lets add a link for closing the window:
<a href="javascript:closeLightBox();">Close LightBox</a>
</div>
</div>
<div id="fade" style="display:none;"></div>
<a href="javascript:openLightBox();">Open LightBox</a>
Ok, so we now have our CSS and HTML in place. As you can see the content that you want to appear within the lightbox is contained within the lightinner div. Now we have to make our two Javascript functions which will control the lightbox. The effects will be controlled by script.aculo.us.
Javascript Functions
//set how far from the top of the screen to display the lightbox
var verticaloffset = 100;
var element = document.getElementById(‘light’);
element.style.top = verticaloffset + ‘px’;
//Use scriptaculous blind effect to show the lightbox, change effect to what you feel looks best
new Effect.BlindDown(‘light’);
//Fade in the background to a 0.7 opacity
new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.0, to: 0.7});
}
function closeLightBox() {
//Reverse the effects to hide the lightbox
new Effect.BlindUp(‘light’);
new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.7, to: 0.0});
}
Pretty simple huh? No big buckets of code like most lightboxes, this is simple and lightweight, of course you will have to tweak the css to get the box formatted the way you feel, this is a basic example.
IMPORTANT: The CSS property position: fixed; is not recognized by IE6 so the lightbox will not function correctly there.
Well before I go grab my tenth coffee of the day and go into some sort of caffeine shock I will leave you with the complete code for this project.
COMPLETE CODE
<head>
<title>LightBox from ScriptPerfect</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function openLightBox() {
//set how far from the top of the screen to display the lightbox
var verticaloffset = 100;
var element = document.getElementById(‘light’);
element.style.top = verticaloffset + ‘px’;
//Use scriptaculous blind effect to show the lightbox, change effect to what you feel looks best
new Effect.BlindDown(‘light’);
//Fade in the background to a 0.7 opacity
new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.0, to: 0.7});
}
function closeLightBox() {
//Reverse the effects to hide the lightbox
new Effect.BlindUp(‘light’);
new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.7, to: 0.0});
}
</script>
<style type="text/css">
#light {
position: fixed;
padding:10px;
width:500px;
height:300px;
color:#333;
background:#E1E1E1;
z-index: 9981;
}
#lightinner {
width:480px;
height:280px;
padding:10px;
border:1px solid #000;
background: #fff;
}
#fade {
position:fixed;
left:0;
top:0;
padding:0;
width:100%;
height:100%;
color:#333;
background:#000;
z-index: 9980;
}
</style>
</head>
<body>
<div id="light" style="display:none;">
<div id="lightinner">This is where your content will go, lets add a link for closing the window:
<a href="javascript:closeLightBox();">Close LightBox</a>
</div>
</div>
<a href="javascript:openLightBox();">Open LightBox</a>
</body>
</html>
A working demo may be seen by clicking here.
![[del.icio.us]](http://scriptperfect.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://scriptperfect.com/wp-content/plugins/bookmarkify/digg.png)
![[dzone]](http://scriptperfect.com/wp-content/plugins/bookmarkify/dzone.png)
![[Facebook]](http://scriptperfect.com/wp-content/plugins/bookmarkify/facebook.png)
![[Furl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/furl.png)
![[Google]](http://scriptperfect.com/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://scriptperfect.com/wp-content/plugins/bookmarkify/linkedin.png)
![[MySpace]](http://scriptperfect.com/wp-content/plugins/bookmarkify/myspace.png)
![[Newsvine]](http://scriptperfect.com/wp-content/plugins/bookmarkify/newsvine.png)
![[Propeller]](http://scriptperfect.com/wp-content/plugins/bookmarkify/propeller.png)
![[Reddit]](http://scriptperfect.com/wp-content/plugins/bookmarkify/reddit.png)
![[Slashdot]](http://scriptperfect.com/wp-content/plugins/bookmarkify/slashdot.png)
![[Spurl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/spurl.png)
![[StumbleUpon]](http://scriptperfect.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://scriptperfect.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://scriptperfect.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://scriptperfect.com/wp-content/plugins/bookmarkify/email.png)
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
Informative and precise…
Its hard to find informative and precise information but here I found…
Blogs ou should be reading…
[...]Here is a Great Blog You Might Find Interesting that we Encourage You[...]……
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
You should check this out…
[...] Wonderful story, reckoned we could combine a few unrelated data, nevertheless really worth taking a look, whoa did one learn about Mid East has got more problerms as well [...]……
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
You should check this out…
[...] Wonderful story, reckoned we could combine a few unrelated data, nevertheless really worth taking a look, whoa did one learn about Mid East has got more problerms as well [...]……
darmo seks…
Tu znajdziesz stosunek seksualny za darmo….
Blogs to read…
[...] If you’re looking for additional info in regards to this situation, more details about today’s issue is accessible on [...]…
Related……
[...]just beneath, are numerous totally not related sites to ours, however, they are completely worth going over[...]……
Script Perfect…
Intimately, the post is really the greatest on that worthw hile topic. I fit in with your conclusions and will certainly eagerly look forward to your next updates. Simply just saying thanks will not just be sufficient, for the great clarity in your wri…
Related……
[...]just beneath, are numerous totally not related sites to ours, however, they are surely worth going over[...]……
Great website…
[...]we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[...]……
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
Related……
[...]just beneath, are numerous totally not related sites to ours, however, they are surely worth going over[...]……
Cool sites…
[...]we came across a cool site that you might enjoy. Take a look if you want[...]……
Sources…
[...]check below, are some totally unrelated websites to ours, however, they are most trustworthy sources that we use[...]……
Recommeneded websites…
[...]Here are some of the sites we recommend for our visitors[...]……
Websites we think you should visit…
[...]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[...]……
Read was interesting, stay in touch……
[...]please visit the sites we follow, including this one, as it represents our picks from the web[...]……
You should check this out…
[...] Wonderful story, reckoned we could combine a few unrelated data, nevertheless really worth taking a look, whoa did one learn about Mid East has got more problerms as well [...]……
Sites we Like……
[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
important links…
Guys check out these important links…
Blogs ou should be reading…
[...]Here is a Great Blog You Might Find Interesting that we Encourage You[...]……
Wikia…
Wika linked to this website…
[...]Sites of interest we have a link to[...]……
[...]usually posts some very interesting stuff like this. If you’re new to this site[...]……
modern politics government 7th edition…
[...]then in May, something happened[...]…
Pleasant…
Such clever work and reporting! Keep up the great work I’ve added your blog to my blogroll. This is a great article thanks for sharing this informative information.. I will visit your blog regularly for some latest post….
Wow!…
A very spectacular post….
………..
My partner and i guess for the time being i’m going to accept book-marking as well as including your Rss to be able to my personal Search engines account. My partner and i look ahead to new changes and can talk about this website with my Myspace party…
Blogs ou should be reading…
[...]Here is a Great Blog You Might Find Interesting that we Encourage You[...]……
the human body is very intriguing indeed. it…
is a permutation and combination of many things and we all need to be careful about the various compositions of our body. anything in excess or anything in less amount or quantity can create tons of problems to the body and…
free website submisson…
I found this really amazing post today…
Websites we think you should visit…
[...]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[...]……
Visitor recommendations…
[...]one of our visitors recently recommended the following website[...]……
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
Sources…
[...]check below, are some totally unrelated websites to ours, however, they are most trustworthy sources that we use[...]……
Websites we think you should visit…
[...]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[...]……
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
Check this out……
[...] please visit the sites we read, together with this one, as it represents our choices from the web [...]…
Click here……
[...] And a significant butterfly structure, with wide lace around the wonderful photograph of the relaxing born [...]…
Recommended websites…
[...] take a look at below, are several totally unrelated sites to ours, on the other hand, they are most honest sources that many of us use [...]…
Sites we Like……
[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
Online Article……
[...]The information mentioned in the article are some of the best available [...]……
Online Article……
[...]The information mentioned in the article are some of the best available [...]……
sopa pipa legislation…
[...]Swedish therapeutic massage was developed using methods employed by the Swedish physiologist as [...]…
Pictures Deck…
[...]always a significant fan of linking to bloggers that I appreciate but do not get quite a bit of link appreciate from[...]…