Lightbox without uploading!

  • 3
  • Idea
  • Updated 8 years ago
Want a lightbox that you can put anything in?
well here's the code!
First we include the Jquery library:

<script type="text/javascript" src="
http://code.jquery.com/jquery-
1.4.2.min.js"></script>



then the javascript:

<script type="text/javascript">
function showlbox()
{
$('#lboxbackground').fadeTo('500', 0.5);
$('#lboxcontent').slideDown('1000');
$('#lboxclose').fadeIn('500');
}
function hidelbox()
{
$('#lboxbackground').fadeOut('500');
$('#lboxcontent').slideUp('500');
$('#lboxclose').fadeOut('500');
}
</script>

at last the html:

<a href="#" onclick="showlbox();">your link</a>
<div id="lboxbackground" style="background:black; display:none;
position:absolute; height:100%; width:100%; left:0px; top:0px;
z-index:1000;"><!--leave this place alone--></div>
<div id="lboxclose" onclick="hidelbox()" style="cursor: hand; background-image:
url('http://www.campatet.com/
resources/img
/close.png'); display:none;
position:absolute; height:20px; width:20px; right:20%; top:19%;
z-index:1002"><!--leave this place alone--></div>
<div id="lboxcontent" style="background:darkgrey; border-radius: 10px;
display:none; position:absolute; height:60%; width:60%; left:20%; top:20%;
z-index:1001;"&gt
&lt!--your content here-->

</div>


That's it!
for a example, click Here



Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
  • happy

Posted 8 years ago

  • 3
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
hey Nathan, i've posted this on your community forum here:http://getsatisfaction.com/nathansmus...