help with Lightbox

[tuskawilla]

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 lightbox is not overtop of my menu system.

I understand that you don't troubleshoot outside scripts. I use All Webs Menu Pro 5 to create my menu system on my website. I was looking for an image Gallery and liked the one here of Lightbox Image Viewer 2.03a which has the ability to add links off of it.

The problem I am facing is as such, when the lightbox pops up, my menu is over top of it. You can see this by going to my test page here and clicking on the Daymor picture:
http://www.somethingbluebridalsalon.com/new/mothers.html

I am not java savy so that's why i'm asking here for help. I figure somehow the menu system is having presidence over the lightbox. The Menu is java based. If you wish, you can view the menu.js here

I would think it may be easy to get one script to take president over the other but being i don't know java i don't know how.

Also note when you look at the html for that page, that the lightbox scripts are in the header, the Menu scripts go at the top of the body.

I appreciate your help! Thanks!

[Jas]

I understand that you don't troubleshoot outside scripts.

We do (to an extent), but not in this section. In this case, it's fine because you are having a problem with a DD script.

I am not java savy. . .

The menu is not Java, it's JavaScript-- which is very different.

I would think it may be easy to get one script to take president over the other but being i don't know java i don't know how.

Have you tried using z-indexes? Try replacing lightbox.css with this:

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 150;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 60;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 140;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Edit: Looking at that menu, it might be better (and easier) to choose a different one. I was trying to figure out how to tweak the code (in case the CSS doesn't work), and the code is very long (more than is needed, in my opinion), scattered (across a few different files) and yet jumbled (improper indenting, etc.), thus making it hard to read, let alone edit. But if you really want that menu and the CSS doesn't work, let me know and I can try.

[tuskawilla]

Eureka!

Jas, thanks for that tip as it put me on the right path to make it work!

the zindex was the key. i went through the menu.js for the menu system and noted it calls it's zindex awmzindex which was set to 1000, i changed the lightbox css zindex to be greater than 1000 and tada!

thanks again for the help.

As I said, i don't know java nor javascript to save my life and i have a friend who uses that All Web Menu Pro5 and it seemed easy enough to learn, faster than learning to do a flash menu of the same sort so I went with it. No doubt it probably puts out a lot of extra code that is not needed but that is normally the case when it's not done by hand.

just cause i thought i'd ask, is there a better menu system out there i should try?

thanks again!

[tuskawilla]

ok,

So one more question strictly about lightbox.

If you reference my test page above, how can i adjust where lightbox pops up?

in my test page, the box pops up with the picture in it and there is a lot of spacing between the top of the webpage and the top of the actual picture. If I wanted it positioned closer to the top of the wepage, how could I adjust it assuming i can adjust that?

[Jas]

If you reference my test page above, how can i adjust where lightbox pops up?

In the file lightbox.js find this:

	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},

and replace it with this:

	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = (t-100) +"px";
	},

(Where 100 is the desired number)

just cause i thought i'd ask, is there a better menu system out there i should try?

Dynamic drive has some great menus, which are just as easy to implement as lightbox, but if your happy with what you have, don't worry about it. I've used generated menus once upon a time as well It'll be fine as long as you don't have to edit the code manually.

[dasubliminal]

Thanks heaps for that mate, massive help. a (t-50) value gives me about 10px of padding which is exactly what I was going for so you've saved me a bunch of headaches over this.