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

Code:

<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:

Code:

<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

Code:

<!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

[CODE]
<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?

Thread: Overlay box help

Thread Tools

Search Thread

Overlay box help

Bookmarks

Bookmarks

Posting Permissions