How to build a jQuery lightbox!
Sorry but screentoaster services that hosted this tutorial is no longer available and has removed all my hard work :(
That said, here was the final results to this video tutorial and can still be used as needed.
Today I wanted to show you how to build your own lightbox using jQuery and CSS.
Here is the completed code if you just want to study the little guy.
HTML:
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Everything You Need to Know About a Lightbox!</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> </head> <body> <button id="action">Click Me</button> <div id="lightBox"> <div id="lightWrap"> <div id="closeBox">X</div> <h2>Hello, world!</h2> </div> </div> <div id="shade"></div> </body> </html>
CSS:
#lightBox {
display:none;
margin:50px 0;
text-align:center;
width:100%;
}
#lightWrap {
background:#000;
border:2px #ccc solid;
color:#fff;
margin:auto;
position:relative;
width:400px;
z-index:2;
}
#shade {
Ed TV series, and a host of social interactions - in short, http://www.donssite.com/viagra-2270 buy viagra relating. By silencing the pain siren, we ignore sildenafil generic uk the underlying cause. The acai berry has been strongly levitra viagra cialis promoted for weight loss. NO then enacts online sildenafil the compound guanylate cyclase which brings about expanded levels of cyclic guanosine monophosphate (cGMP) and nitric oxide are boosted. background:#000;
display:none;
height:100%;
left:0;
opacity:0.5;
position:absolute;
top:0;
width:100%;
z-index:1;
}
#closeBox {
background:#F36;
cursor:pointer;
height:16px;
line-height:15px;
position:absolute;
right:10px;
top:5px;
width:16px;
}
Javascript:
$(document).ready(function(){ $("#action").click(function(){ $("#lightBox").fadeIn("fast"); if($("body").height() > $("body").offset().height){ var sH = $("body").height(); }else{ var sH = $("body").offset().height; } $("#shade").css({height:sH+'px',}).slideDown("fast"); $("#closeBox").click(function(){ $("#lightBox").fadeOut("fast"); $("#shade").slideUp("fast"); }); }); });
Thanks Everyone!
Devin R. Olsen