Results 1 to 4 of 4

Thread: Overlay box help

  1. #1
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Overlay box help

    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!

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    please post a link to the problem page.
    Thanks,

    Bud

  3. #3
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •