JQuery Lightbox- confine overlay to specific div - not whole page

Have spent days trying to figure this, but maybe is not possible.

I am using jquery lightbox and a seperate main page navigation for multiple galleries each with a lighbox feature.

I would like to nest the jquery lightbox overlay within a div so it does not cover the whole window but only relates to the div it is in?

Reason being - I would like the main Navigation to be accessible without clicking on the overlay and I want the lightbox content to stay within 开发者_开发问答set parameters ( i.e. the container for the page), not move around when different screen resolutions are used and thus not be aligned with main navigation bar and headings.

Any advice re: jquery script, addons, to use to make this possible, if at all possible. Or other suggestions would be much appreciated.

Thank you

I think you'll likely have to do away with the lightbox plugin's provided overlay and do your own.

The process of creating an overlay is simple. I could reinvent the wheel here, or I can just send you something like this blog post: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

See that overlay div with a class of #overlay? All you should need to do to make it size to a container is put that overlay div within that container and set the container style position: relative.

You can choose to ignore all of that post's implementation on the JavaScript side and replace it with your favorite modal plugin, but you'll need to bind into the show/hide event on the modal dialog to show/hide your custom overlay, something that should certainly be possible. However, the specifics of doing this vary by the plugin you choose.

I was facing a problem my light box was loading under the page. The problem is that in css file including code

when the light box loading under the page i have written this line

<link  type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

only inculde rel="stylesheet" in link tag

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

My problem is resolved