Centering Lightbox in a Window

[Beta Cygni]

1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

I use lightbox inside of a custom window that works well, however as I continuously add images in a horizontal row they go outside of the page boundary which means scrolling to the right is necessary.

My problem is: the light box always opens aligned left, hidden in the scrolled over area (it is either not viewable or partially viewable at this point).

Is there a way to have the image clicked on open in the center of where i have scrolled to since the image clicked on is in view also?

see problem here:
http://www.renaissancedesignsinc.com/home.html

(click on the corporate menu button and try to view an image that must be scrolled to)



- Beta Cygni -

[jscheuer1]

I'm not entirely certain why, but your page doesn't work at all except in IE. This is probably because there is something native only to IE that is used by your menu.

Then, in IE, when I went to load your page, it wanted to open a PDF. I aborted that, but it was annoying. Then I finally did see the issue you are talking about.

Here's what I would suggest, first get rid of the PDF or make it something the user may click on only if they choose to, second fix that menu. Third, since you are loading up dynamic content anyway just to expose the iframe with the problematic lightbox in it, why not use either a lightbox that is on the page itself, or even imported via AJAX. If you want to go the AJAX route, use an AJAX friendly version of lightbox like 2.04a:

http://www.dynamicdrive.com/forums/s...470#post163470

Either way, the lightbox would then have the entire page to display over, so would be much less likely to have a horizontal scrolling issue. If your thumbnails were in a division with a set width and height with overflow auto, they could still exhibit a scrollbar like they do now. Something like:

<div style="width:400px;height:350px;overflow:auto;">
<div style="width:600px;">
Thumbnails here
</div>
</div>

[Beta Cygni]

not to sure of what you mean by "use either a lightbox that is on the page itself" but i would settle for letting the lightbox display on the whole screen as apposed to the custom window if thats what you mean. I however cant seem to make the lightbox open on the fullpage.

(no clue about AJAX)

this would be one of my lines of code as an example:

<td width="160" height="160"><a href="../gallery/2008/weddings/event_w1/evtimg.jpg" title="Sheraton Wedding Show | 2008" rel="lightbox[weddings]" rev="../gallery/2008/weddings/event_w1/index.html" target="_parent"><img src="../gallery/2008/weddings/thumbs/thumb_01.gif" name="thumb_01" width="160" height="160" border="0" id="thumb_01" /></a></td>

[jscheuer1]

You don't need AJAX for this, but it would allow you to have separate pages with the lightbox markup on it. Without AJAX, you could simply ditch the iframe, and put your thumbnails in a division (or two nested divisions) that replace the iframe. Install the lightbox script on the page, and Bob's yer uncle.

If you wanted to use multiple sets of thumbnails, these could each be in separate divisions on the page that are only shown when summoned.

[Beta Cygni]

the thing is that the iframe is loaded from a .js file so i'm gathering that if i do use a div in the .js id have to specify all the code in there as well and i wouldn't want to do that. Id prefer to reference an external file.

I use the .js to load the DHTML windows. which in turn loads an HTML file that has the code/content for the gallery and the lightbox.

sidenote: i have tested the lightbox on a fullscreen with the horizontal runoff and it is still opening in the hidden area i checked the lightbox script and came accross this: (im assuming this might have something to do with it?)

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}