Log in

View Full Version : Overlay box help


hiro
05-05-2012, 04:34 PM
Hi everybody,

I need your help! I'm trying to apply a sort of overlay box to my site but I don't manage to nest it.
This is the source I'm trying to use:

Here the Script


<script type="text/javascript" >

$(document).ready(function(){
$(".thumb").click(function(){
var address= $(this).attr("a");
$(".popup").fadeIn("slow");
$(".lightbox").attr("rel",address);
});
$("#close").click(function(){
$(".popup").fadeOut("fast");
});
});
</script>



and here is the body content:



<body>

<div>
<img src="images/ferrari1.jpg" class="thumbnail" width="120">
<img src="images/ferrari2.jpg" class="thumbnail" width="120">
<img src="images/ferrari3.jpg" class="thumbnail" width="120">
</div>

<div id="popup">
<div id="center">
<img id="lightbox" src="images/ferrari1.jpg" >
<img id="close" src="images/close.png" alt="close" >
</div> <!-- #center -->
</div> <!-- #popup -->


</body>


Instead of img I have to use different div and they have to open different overlay box.
I hope It's clear..

I tryed to search but I didn't succeed in making something work.

Thank's for your help!
ajfmrf
05-05-2012, 05:01 PM
please post a link to the problem page.
hiro
05-05-2012, 05:12 PM
sorry but is still a work in progress and not online yet...following the code of the page



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<link href="../kgsite.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../dati/jquery.js" ></script>
<script type="text/javascript" >

$(document).ready(function(){
$(".thumb").click(function(){
var address= $(this).attr("a");
$(".popup").fadeIn("slow");
$(".lightbox").attr("rel",address);
});
$("#close").click(function(){
$(".popup").fadeOut("fast");
});
});
</script>

</head>

<body>

<div class="contenitore2">

<div id='scroll_clipper' style='position:relative; height: 435px; width:800px; overflow:hidden; margin-top:0 !important'>

<div id='scroll_text' style="overflow-y: scroll; width: 800px; height: 435px; padding-right: 25px">

<div class="thumb" style="background-color:#FFF !important; margin-top:0 !important"><a href="#">MENU 01</a></div>
<div class="thumb" style="background-color:#FFF !important"><a href="#">MENU 02</a></div>
<div class="titolo" style="background-color:#FFF !important">MENU 03</div>
<div class="titolo" style="background-color:#FFF !important">MENU 04</div>
<div class="titolo" style="background-color:#FFF !important">MENU 05</div>
<div class="titolo" style="background-color:#FFF !important">MENU 06</div>
<div class="titolo" style="background-color:#FFF !important">MENU 07</div>
<div class="titolo" style="background-color:#FFF !important">MENU 08</div>

</div>
</div>

</div>

<div class="popup">
<div class="lightbox">
<div id='scroll_clipper' style="position:absolute; height: 435px; width:800px; overflow:hidden">
<div id='scroll_text' style="overflow-y: scroll; width: 800px; height: 435px; padding-right: 25px">
<a href="#"><div id="close" style="border-bottom:1px solid #000;">MENU 01 <em>close</em></div></a>
<div id="contenuto" style="width:784px;height:auto;padding-left:8px;padding-right:8px;font-family: Arena Condensed, Arial, sans-serif !important;font-size: 12px !important;color: #000">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>

<div class="popup">
<div class="lightbox">
<div id='scroll_clipper' style="position:absolute; height: 435px; width:800px; overflow:hidden">
<div id='scroll_text' style="overflow-y: scroll; width: 800px; height: 435px; padding-right: 25px">
<a href="#"><div id="close" style="border-bottom:1px solid #000;">MENU 01 <em>close</em></div></a>
<div id="contenuto" style="width:784px;height:auto;padding-left:8px;padding-right:8px;font-family: Arena Condensed, Arial, sans-serif !important;font-size: 12px !important;color: #000">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>


</div> <!-- #center -->
</div> <!-- #popup -->

</body>

</html>


modifying the code I'm sure I've messed up everything but I can't figure it out yet..:(
hiro
05-07-2012, 05:58 PM
ok I've found something... here the scripta



<script type="text/javascript" language="javascript">
/* Superior Web Systems */
function displayHideBox(boxNumber)
{
if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
document.getElementById("LightBox"+boxNumber).style.display="block";
document.getElementById("grayBG").style.display="block";
} else {
document.getElementById("LightBox"+boxNumber).style.display="none";
document.getElementById("grayBG").style.display="none";
}
}
</script>
[\CODE]

and here the body code
[CODE]
<!--start overlay content-->

<div id="LightBox1" class="box_content" style="display:none;">
<div class="titolo" onclick="displayHideBox('1'); return false;" style="margin-top:0 !important;cursor:pointer; border-bottom:#000 solid 1px">MENU 01</div>
<!--qui il resto-->
</div>
</div>

<div id="LightBox2" class="box_content" style="display:none;">
<div class="titolo" onclick="displayHideBox('2'); return false;" style="margin-top:0 !important;cursor:pointer; border-bottom:#000 solid 1px">MENU 02</div>
<!--qui il resto-->
</div>
</div>

<div id="LightBox3" class="box_content" style="display:none;">
<div class="titolo" onclick="displayHideBox('3'); return false;" style="margin-top:0 !important;cursor:pointer; border-bottom:#000 solid 1px">MENU 03</div>
<!--qui il resto-->
</div>
</div>

<!--end overlay content-->



now it works but it doesn't have any fade effect.
Any suggestion about how to adjust it with fade in/out effect?