Creating A Simple jQuery Lightbox

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Creating your own Lightbox is not that hard maybe it'll not be that advanced my it could be like above image and today in this article i'am gonna teach you about it. Full tutorial is jQuery and CSS3 based and creating a simple lightbox is not that hard.

First add a jQuery script in your document :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"> </script>

After adding jQuery we're going to add CSS in our document

<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>

In above CSS #Lightbox is our lightbox background , #Lightbox-panel is our lightbox and #Close-panel is our lightbox close button.

Z-index of #lightbox-panel should be more than #lightbox otherwise your lightbox will appear under background.Now time to add JavaScript which will give you control to open or close lightbox :

<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>

In javascript there are the snippets first one opens the lightbox , second one closes it when you on close button and third button closes it when you click outside/background of lightbox and we're almost done with this just have to add HTML now :

<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Your Lightbox Title</h2>
    <p>Lightbox Content.</p>
<a id="close-panel" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

So <a id="show-panel" href="#">Show Panel</a> is button which will open the lightbox and <div id="lightbox-panel">...All Crap.. </div> is our lightbox and we have to add our content in it , <a id="close-panel".........</a> is our close button and in last <div id="lightbox"> </div> is our lightbox background.

Here's a preview how it'll look in your browser :

Show Panel

Lightbox Panel

Woo Woo Woo You Know It.

You can also add images in lightbox-panel. Below is full document code :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js">
</script>
<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>Woo Woo Woo You Know It.</p>
<a id="close-panel" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

Like this then please comment and tell us your opinions.

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.