PDA

View Full Version : lightbox with text instead of image



daraptor
01-31-2010, 09:22 AM
1) Script Title: lightbox text viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: how shud i do the lightbox to show a 20-30 line paragraph instead of image...i.e...when i hit the image....i want the light box to show me a paragraph intead of image....i would really appreciate if someone can help with this...am goin crazy searchin for this but no luck

bluewalrus
01-31-2010, 05:45 PM
Two options I'm thinking of, make the text an image, don't use lightbox but rather something else that uses the jquery functionality. I made this a bit ago which is similiar to what you need. The keycode function doesnt set the display back to none though... maybe someone else can fix that for ya



<a onclick="document.getElementById('overview').style.display ='block'; document.getElementById('fade').style.display ='block';" class="fadein" href="javascript:void(0);">ACTIVATE</a>
<script type="text/javascript">
$(document).keydown(function(e) {
if ((e.keyCode == 27) || (e.keyCode == 88) || (e.keyCode == 120)) {
$('#overview').fadeTo("slow", 0);
$('.black_overlay').fadeTo("slow", 0);
run_this();
}
});
$(document).ready(function(){
$('.fadein').click(function(){
$('#overview').fadeTo("slow", 1);
$('.black_overlay').fadeTo("slow", .8);
});
});
function run_this() {
$(document).ready(function(){
$('.fadeout').click(function(){
$('#overview').fadeTo("slow", 0);
$('.black_overlay').fadeTo("slow", 0);
});
});
return false;
}
</script>
<style type="text/css">
.fadein {
display: block;
opacity:1;
}
#overview {
display:none;
opacity:0;
display: none;
position:absolute;
top:25%;
left:25%;
margin:0 auto;
width: 50%;
height: 300px;
background-color: white;
z-index:1002;
}
.black_overlay{
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
opacity:0;
}
.fadeout {
position:absolute;
}
</style>


<div id="overview">
TEXT
<a onclick="run_this(); document.getElementById('overview').style.display ='none'; document.getElementById('fade').style.display ='none';" class="fadeout" href="javascript:void(0);">Close</a><p></p></div>


Oh, this uses jquery as well so you'll need that. http://docs.jquery.com/Downloading_jQuery