Lightbox 2.0 problems

[jscott]

Hi, i cant seem to get the prev/back and close buttons to appear, ive added in a group name which i located from another post, and also done a modification to the css, to make the prev/back buttons appear all the time instead of mouseover, and i still cant get it to work.

Can someone please have a look, ive got no clue at this point, and i know its going to be some thing stupid that ive missed

http://www.dtds.com.au/access.html

Thanks
Jodie

[jscheuer1]

Use:

 rel="lightbox[access]"

for all of the links.

Make this:

<a href="images/atm_enviro-(1).jpg" rel="lightbox (access)" title="Access Track Maintenance" class="thumb"><img src="images/gtn_atm_enviro-(1).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(2).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(2).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(3).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(3).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(4).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(4).jpg" alt="" /></a> <a href="images/atm_enviro-(5).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(5).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(6).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(6).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(7).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(7).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(8).jpg" rel="lightbox" class="thumb"><img src="images/gtn_atm_enviro-(8).jpg" alt="Access Track Maintenance" /></a>

Like so:

<a href="images/atm_enviro-(1).jpg" rel="lightbox[access]" title="Access Track Maintenance" class="thumb"><img src="images/gtn_atm_enviro-(1).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(2).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(2).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(3).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(3).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(4).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(4).jpg" alt="" /></a> <a href="images/atm_enviro-(5).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(5).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(6).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(6).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(7).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(7).jpg" alt="Access Track Maintenance" /></a> <a href="images/atm_enviro-(8).jpg" rel="lightbox[access]" class="thumb"><img src="images/gtn_atm_enviro-(8).jpg" alt="Access Track Maintenance" /></a>

[jscott]

Thanks, that worked, new it was something simple as [].

Just one more question, the close button will only appear if i put it into the css #imageData #bottomNavClose, without this i just get the "image missing" box, and also when i attach the graphic to the css, the box still appears over the top of it. Ive checked the origional css, and mines the same, so again i am not sure what i am missing.

Thanks
Jodie

[jscheuer1]

Your page is looking for the close image here:

http://www.dtds.com.au/images/closelabel.gif

Either put it there, or change its path in lightbox.js here:

. . . dAction()
    - preloadNeighborImages()
    - end()
    
    Function Calls
    - document.observe()
   
*/
// -----------------------------------------------------------------------------------

//
//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	// When grouping images this is used to write: Image # of #.
	// Change it for non-english  . . .

If using the script on two or more pages in different folders, it would be best to specify the absolute path.

[jscott]

That worked, thank you very much for you help, i would not have checked the link there.

[jscott]

Something else has just popped up, ive got all the galleries working properly, and just testing on all browsers, Opera appears to have an issue, without scrolling down to the galleries if you can click on a tn, the lb opens up as it should and black out the whole screen, if you scroll down to see all the tn available, when the lb opens it only blacks out half the screen, all other browsers are perfect. Any suggestions.
Thanks

[jscheuer1]

That's a bug in the way that the script determines the height of the overlay visa vis the height of the page.

If you were to change this (at the end of lightbox.css):

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

to

#overlay{ position: fixed; top: 0!important; left: 0!important; z-index: 90; width: 100%; height: 500px; background-color: #000; }

That would fix it, but would mess things up in IE 6 and less which don't do fixed positioning. So instead of doing that, add this (highlighted) after your current styles:

	<link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="CSS/style.css" media="screen" />
	<style type="text/css" media="screen"><!--
#layer1 { height: 20px; width: 280px; left: 780px; top: 170px; position: absolute; visibility: visible; }
#layer2 { height: 91px; width: 490px; left: 540px; top: 50px; position: absolute; visibility: visible; }
--></style>
<!--[if !IE]> <-->
<style type="text/css">
#overlay{ position: fixed; top: 0!important; left: 0!important; }
</style>
<!--> <![endif]-->