This week, I am working on the java script Light Box foe both article chapter and slide show chapter. I have find an example online to do such a thing. And by simply add my code to both chapters index will make the light box function work!
And here is my code:
Quick Simple Light Box
body
{
font-family: Helvetica, Arial;
}
.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
z-index:50;
display:none;
}
.box
{
position:absolute;
top:5%;
left:25%;
background: #000;
z-index:51;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:0px 0px 15px #444444;
-webkit-box-shadow:0px 0px 15px #444444;
box-shadow:0px 0px 15px #444444;
display:none;
}
}
$(document).ready(function(){
$(‘.lightbox’).click(function(){
$(‘.backdrop, .box’).animate({‘opacity’:’.50′}, 300, ‘linear’);
$(‘.box’).animate({‘opacity’:’1.00′}, 300, ‘linear’);
$(‘.backdrop, .box’).css(‘display’, ‘block’);
});
$(‘.close’).click(function(){
close_box();
});
$(‘.backdrop’).click(function(){
close_box();
});
});
function close_box()
{
$(‘.backdrop, .box’).animate({‘opacity’:’0′}, 300, ‘linear’, function(){
$(‘.backdrop, .box’).css(‘display’, ‘none’);
});
}
This is Quick Simple Light Box
Realized that the picture I use in the web page is called 1.jpg and 1-mini.jpg. These two picture have different size. So before we upload the picture, I will need to smaller the regular size pictures and then it should work prefect.
From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.
