PDA

View Full Version : Lightbox 2.03 overlay not over whole page



elmo115
07-28-2008, 10:39 PM
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?

Nile
07-28-2008, 11:06 PM
Can you please post a link to your page.

elmo115
07-29-2008, 12:16 AM
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.

Nile
07-29-2008, 12:34 AM
Please then post the page online.

elmo115
07-29-2008, 02:33 AM
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.

Nile
07-29-2008, 02:46 AM
Yes, the code will be fine. Sorry.

elmo115
07-29-2008, 12:06 PM
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


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

elmo115
07-29-2008, 12:07 PM
Here is Section 2

Hope this helps. Thanks.


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

jscheuer1
07-29-2008, 01:03 PM
See:

http://www.dynamicdrive.com/forums/showthread.php?t=28254&highlight=lightbox+overlay

and:

http://www.dynamicdrive.com/forums/showthread.php?t=23433&highlight=lightbox+overlay

elmo115
07-30-2008, 12:56 AM
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.

elmo115
07-31-2008, 02:22 AM
If no one has any ideas about my problems, I would like to just have the images fade in and enlarge properly like before. My other questions would just be a nice add on. Thanks for everyones help so far.

jscheuer1
07-31-2008, 02:55 AM
To work with this in any detail, I would need to see a live demo of the problem(s). I know you've already stated that it isn't online yet. But, you should be able to just put up a page somewhere that shows this/these issue(s).

However, once images are cached, they take much less time to load up in the lightbox, this minimizes the special effects' duration, which are partly there just to 'entertain' the user while the image loads. If you are using lightbox groups (rel="lightbox[something]"), each image that loads into the lightbox also caches the next and previous images if any. This means that those images will also take much less time to load into the lightbox, because even if they haven't been viewed yet, they are in the browser's cache.

As for alignment, much of that has to do with the size of the window and the size of the images. Some tweaking is possible to get the lightbox to appear a little higher up in the window though. Generally, your images should be no taller than something like 400px. Otherwise they (along with the lightbox 'chrome') will not fit vertically on an 800 x 600 display.

As for enhancing with a logo, it would be helpful to see the logo. But I would want to resolve your other issues first.

elmo115
07-31-2008, 03:44 PM
Thanks for the reply jscheuer1. My images are 450px high. I tried my page again today, and everyting seems to work. Though what seems to happen is the pictures sometimes will show high enough to read the bottom, and sometimes they dont. It seems that the fading only doesnt work when you enlarge the picture. It seems to fade from picture to picture ok. The logo I would put at the top (probably left side) would be around 200px x 50px. I am going away for 2 weeks so I will continue when I get back. Thanks again.