Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Lightbox 2.03 overlay not over whole page

  1. #1
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Lightbox 2.03 overlay not over whole page

    1) Script Title: Lightbox image viewer 2.03a

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

    3) Describe problem: The black overlay is only the size of my monitor. When I open an image, the black background fills my current screen, but as soon as I scroll down, the overlay does not continue. It only seems to take the size of your monitor resolution. Also, the overlay only shows at the very top of my page, no matter the location of the picture I open. Is there any way to fix the overlay to show over the entire page?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Can you please post a link to your page.
    Jeremy | jfein.net

  3. #3
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I do not have it yet uploaded because I am in the finishing stages of the design process. I can give you any of the code that I have, though I do not yet have a direct link to the page.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Please then post the page online.
    Jeremy | jfein.net

  5. #5
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    When you say post the page, do you want me to post all of the code or the code for the lightbox? I am new to this forum . If I post the code, the image files, etc. on the page would not show because they would not have the correct files to link to. Is that ok? Thanks for replying.

  6. #6
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Yes, the code will be fine. Sorry.
    Jeremy | jfein.net

  7. #7
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Here is the code for the basis of my page. I have to put it in 2 posts because it said I can only have 10000 characters at a time and I have more.

    Section 1

    HTML 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="Shortcut Icon" href="../favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../Format.css" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //
    -->
    </script>
    <style type="text/css">
    }
    
    .style1 {
    	border-collapse: collapse;
    }
    
    .style3 {
    	font-family: Arial, sans-serif;
    	font-size: 18pt;
    	color: white;
    	background-color: #3777B0;
    	border-bottom: 2pt solid #BA1414;
    	text-align: right;
    	font-weight: bold;
    }
    
    .style4 {
    	border-collapse: collapse;
    	margin-bottom: 0px;
    }
    
    a {
    	color: #DFDFDF;
    }
    
    
    
    </style>
    </head>
    
    <body style="background-color: #EFEFEF" class="font6">
    			
    			<img alt="" src="Main Menu_r1_c1_f2.gif" style="display: none"/>
    			<img alt="" src="Main Menu_r3_c1_f2.gif" style="display: none"/>
    			<img alt=" "src="Main Menu_r4_c1_f2.gif" style="display: none"/>
    
    <div style="position: absolute; width: 100px; height: 100px; z-index: 1; visibility: visible; left: 10px; top: 14px;" id="Header">
    	<img alt="" src="../Images/Page_Header.png" width="981" height="628" /></div>
    <p></p>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 44px; top: 200px; visibility: visible;" id="Menu">
      <table border="0" cellpadding="0" cellspacing="0" width="116">
    <!-- fwtable fwsrc="Main Menu Dark Red.png" fwbase="Main Menu.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
      	<tr>
    		<td><img src="spacer.gif" width="116" height="1" border="0" alt="" /></td>
    		<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    		<a onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Main20Menu_r1_c1','','Main%20Menu_r1_c1_f2.gif',1);" href="../index.htm">
    		<img name="Main20Menu_r1_c1" src="Main%20Menu_r1_c1.gif" width="116" height="26" border="0" alt="" /></a></td>
    		<td><img src="spacer.gif" width="1" height="24" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td>
    		<a onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Main20Menu_r3_c1','','Main%20Menu_r3_c1_f2.gif',1);" href="products.htm">
    		<img name="Main20Menu_r3_c1" src="Main%20Menu_r3_c1.gif" width="116" height="24" border="0" alt="" /></a></td>
    		<td><img src="spacer.gif" width="1" height="24" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    		<a onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Main20Menu_r4_c1','','Main%20Menu_r4_c1_f2.gif',1);" href="../service.htm">
    		<img name="Main20Menu_r4_c1" src="Main%20Menu_r4_c1.gif" width="116" height="28" border="0" alt="" /></a></td>
    		<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td>
    		<a onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Main20Menu_r6_c1','','Main%20Menu_r6_c1_f2.gif',1);" href="../contact_us.htm">
    		<img name="Main20Menu_r6_c1" src="Main%20Menu_r6_c1.gif" width="116" height="27" border="0" alt="" /></a></td>
    		<td><img src="spacer.gif" width="1" height="27" border="0" alt="" /></td>
    	</tr>
    	<tr>
    		<td>
    		<img name="Main20Menu_r7_c1" src="Main%20Menu_r7_c1.gif" width="116" height="1" border="0" alt="" /></td>
    		<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
    	</tr>
    	</table>
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 10px; top: 3000px; visibility: visible" id="Footer">
    	<img alt="" src="../Images/Page_Footer_2008.png" width="967" height="229" /></div>
    		
    <div style="position: absolute; width: 300px; height: 4px; z-index: 1; left: 202px; top: 271px; visibility: visible;" id="Red_Und0" class="Red_Und">
    		<hr style="height: 4px; width: 270px" class="Red_Und" />
    		</div>
    		
    <div style="position: absolute; width: 480px; height: 35px; z-index: 1; left: 210px; top: 248px; visibility: visible;" id="Heading" class="Page_Title">
    Lugger Truck Units</div>
    		
    <div style="position: absolute; width: 836px; height: 2370px; z-index: 1; left: 167px; top: 335px; visibility: visible" id="Spec_Chart">
    	<span class="Blue_HeadingRUnd">Heading</span><br />
    	<br />
    	<table style="width: 100%">
    		<tr>
    			<td>
    			<table style="width: 100%; height: 1945px;">
    				<tr>
    					<td style="height: 23px"><span class="Text12Desc"><strong>-</strong> 
    					Text
    					&nbsp;&nbsp; 
    	<br />
    	<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					<br />
    					</span></td>
    					<td style="width: 200px;" rowspan="10" valign="top">
    					<table style="width: 100%; height: 1701px;">
    						<tr>
    							<td>
    							<a href="../Images/Lugger Truck/Ovyellcont_en.jpg" rel="lightbox[LT]" title="Model LT40 with a lugger container.">
    							</a></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Ovyell_en.jpg" rel="lightbox[LT]" title="Model LT40">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Ovyell_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Ovegray_en.jpg" rel="lightbox[LT]" title="Model LT40">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Ovegray_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Jackleg_en.jpg" rel="lightbox[LT]" title="Enclosed Jack Legs">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Jackleg_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Containerguides_en.jpg" rel="lightbox[LT]" title="Container Guides on Deck">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Containerguides_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Dumppin_en.jpg" rel="lightbox[LT]" title="Dump Pin System For Container Discharge">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Dumppin_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Saddleblock_en.jpg" rel="lightbox[LT]" title="Saddle Block On Reinforced Top Shaft">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Saddleblock_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>

  8. #8
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Here is Section 2

    Hope this helps. Thanks.

    HTML Code:
    <tr>
    							<td><a href="../Images/Lugger Truck/Greasefitting_en.jpg" rel="lightbox[LT]" title="Grease Fittings On Main Shaft">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Greasefitting_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Hydtank_en.jpg" rel="lightbox[LT]" title="Hydraulic Tank With Standard In Tank Filter, Sight Level and Filler Cap">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Hydtank_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Bodyvalve_en.jpg" rel="lightbox[LT]" title="External Hydraulic Control Valves">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Bodyvalve_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Cabcontrols_en.jpg" rel="lightbox[LT]" title="In Cab Hydraulic Controls With Indicator Lights">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Cabcontrols_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/PumpPTO_en.jpg" rel="lightbox[LT]" title="Transmission Mounted Hydraulic Pump With Air Controlled PTO">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/PumpPTO_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    						<tr>
    							<td><a href="../Images/Lugger Truck/Tarpbox_en.jpg" rel="lightbox[LT]" title="Locking Watertight Aluminum Tarp Box">
    							<img alt="Click To Enlarge" src="../Images/Lugger%20Truck/Tarpbox_th.jpg" width="200" height="150" class="PicNoBorder" /></a><span class="PicNoBorder">&nbsp;</span></td>
    						</tr>
    					</table>
    					<br />
    					</td>
    				</tr>
    				<tr>
    					<td style="height: 23px"><span class="Blue_HeadingRUndSM">
    					Standard Features Include:</span><br />
    					<br />
    					</td>
    				</tr>
    				<tr>
    					<td style="height: 23px"><span class="Text12BDesc">
    					Heading</span></td>
    				</tr>
    				<tr>
    					<td>
    					<ul>
    						<li>Text</li>
    						<li><br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						</li>
    					</ul>
    					</td>
    				</tr>
    				<tr>
    					<td><span class="Text12BDesc">Heading</span></td>
    				</tr>
    				<tr>
    					<td style="height: 23px">
    					<ul>
    						<li>Text<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						</li>
    					</ul>
    					</td>
    				</tr>
    				<tr>
    					<td><span class="Text12BDesc">Heading</span></td>
    				</tr>
    				<tr>
    					<td>
    					<ul class="Text12Desc">
    						<li>Text<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						<br />
    						</li>
    					</ul>
    					</td>
    				</tr>
    				<tr>
    					<td>
    			<span class="Blue_HeadingRUndSM">Specifications<br />
    					<br />
    					</span>
    					</td>
    				</tr>
    				<tr>
    					<td>
    			<table style="width: 100%" class="style1">
    				<tr>
    					<td class="style3" style="width: 173px">
    					&nbsp;</td>
    					<td class="Text30Table">&nbsp;&nbsp; Unit Specifications</td>
    				</tr>
    			</table>
    			<table style="width: 100%; height: 505px;" class="style4">
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">Info Info 
    					Info Info Info Info </td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">Info Info Info Info Info Info Info 
    					Info InfoInfo</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="height: 21px; width: 20px">
    					&nbsp;</td>
    					<td class="Text12BLGLTable" style="height: 21px; width: 200px">
    					&nbsp;</td>
    					<td style="height: 21px" class="Text12Desc">&nbsp;</td>
    					<td style="height: 21px" class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc" style="width: 20px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px" valign="top">
    					&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BLGLTable" style="width: 20px">&nbsp;</td>
    					<td class="Text12BLGLTable" style="width: 200px">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td style="width: 20px" class="Text12BLGLTable">&nbsp;</td>
    					<td style="width: 200px" class="Text12BLGLTable">&nbsp;</td>
    					<td>&nbsp;</td>
    					<td class="Text12Desc">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12Desc" colspan="4">&nbsp;</td>
    				</tr>
    				<tr>
    					<td class="Text12BDesc" colspan="4"><span class="Text12BDesc">
    					Heading</span></td>
    				</tr>
    				<tr>
    					<td class="Text12Desc" colspan="4">
    					<ul class="Text12Desc">
    						<li>Text</li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    					</ul>
    					</td>
    				</tr>
    			</table>
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    					<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    			<br />
    					</td>
    				</tr>
    			</table>
    			<br />
    			<br />
    			</td>
    		</tr>
    	</table>
    	
    	
    			</div>
    		
    	
    <div style="position: absolute; width: 100px; height: 2367px; z-index: 1; left: 10px; top: 636px" id="Side_Fillet">
    	<img alt="" src="../Images/Side%20Line%20Filler.png" width="59" height="2370" /></div>
    		
    </body>
    
    </html>

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

  10. #10
    Join Date
    Jul 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks jscheuer1, the second link you posted fixed my problem. Though there is now something that happens. Usually when you click on a image to enlarge it, the 250 x 250 px white background expands and fades from white to the picture. Now, when I click a picture for the first time, it works properly. Then if I close the picture and go to open another one, the fading and expanding does not occur. The picture pops right up. A second question is that when my image opens, the picture is aligned with the bottom of my screen, and the title tag and close button are off the screen. Is there any way to move the picture up so you can see it? Oh also, is there any way to put an image at the top of the viewer so a company logo is always showing on the top? Thanks.

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
  •