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?

Can you please post a link to your page.

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.

Please then post the page online.

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

Yes, the code will be fine. Sorry.

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">  </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">  <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    <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"> </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"> </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"> </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"> </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"> </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"> </span></td> </tr>

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"> </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"> </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"> </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"> </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"> </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"> </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">  </td> <td class="Text30Table">   Unit Specifications</td> </tr> </table> <table style="width: 100%; height: 505px;" class="style4"> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px">Info Info Info Info Info Info </td> <td class="Text12Desc"> </td> <td class="Text12Desc">Info Info Info Info Info Info Info Info InfoInfo</td> </tr> <tr> <td class="Text12BLGLTable" style="height: 21px; width: 20px">  </td> <td class="Text12BLGLTable" style="height: 21px; width: 200px">  </td> <td style="height: 21px" class="Text12Desc"> </td> <td style="height: 21px" class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc" style="width: 20px"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px" valign="top">  </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12BLGLTable" style="width: 20px"> </td> <td class="Text12BLGLTable" style="width: 200px"> </td> <td class="Text12Desc"> </td> <td class="Text12Desc"> </td> </tr> <tr> <td style="width: 20px" class="Text12BLGLTable"> </td> <td style="width: 200px" class="Text12BLGLTable"> </td> <td> </td> <td class="Text12Desc"> </td> </tr> <tr> <td class="Text12Desc" colspan="4"> </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>

See:

http://www.dynamicdrive.com/forums/s...ghtbox+overlay

and:

http://www.dynamicdrive.com/forums/s...ghtbox+overlay

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.