I recently came across this great plugin and I thought it would be a great way to display larger images from thumbs in a gallery, however I am having trouble getting images to center on the page.

I have a test gallery with thumbs and larger images, some in portrait, some in landscape orientation. The floatbox for portrait orientation images (300Wx450H px) is off towards the top of the page by about 20px (about 58 px from the top and 78px from the bottom), instead of being equally far from the bottom and top browser edges. When I display an image in landscape orientation (with same proportions 450W x 300H px), the image is off even more: 90 px from the top and 190 px from the bottom.

I tried the boxTop option and used an offset for the portrait style image but then the landscape style image is off even more, so this is not a solution. Furthermore, I am not sure the offset applied for one screen size would work for other screen sizes.

These are the options I use:

fbPageOptions = {
theme: 'white',
outerBorder: 0,
innerBorder: 0,
resizeDuration: 4.5,
imageFadeDuration: 4.5,
overlayFadeDuration: 0,
shadowType: 'none',
showItemNumber: true,
showCaption: false,
infoPos: 'br',
navType: 'overlay',
showNavOverlay: 'once',
showHints: 'once',
outsideClickCloses: true

Is there any easy solution to fix this problem?

Default positioning is centered horizontally and 1/3 from the top vertically (that is, 1/3 of free space above and 2/3 below, moving toward 50/50 when there's not much free vertical space). If you want to force a different position, it's probably best to do so with a boxTop option in the rev tags of each image so that the position can be unique for each image. Note though that free space will be dependent on each client's browser window size.

Thank you for the quick reply, I guess that's the easy way for a given window/screen size but it would not work for people who view the gallery on other screen sizes, would it?

I am wondering if perhaps there is a way to use the jQuery center plugin or perhaps lift and insert some code from other lightbox scripts that somehow manage to always keep the box centered?

I'll post the solution, if I find one.

I'm really not sure what you mean by always centered. Floatbox is always centered (unless you drag it or it's too big to fit the current browser window), except it places itself a little towards the top of the screen. Moving it up a bit looks better than smack square in the center. But if you want it smack in the center, probably best just to hack the positioning code. Hint: Look for a division by 3.

Cheers...

Hi,

I need to get the fb positioned in the center but until now couldn't find the correct "switch" in the code.

The only "division by 3" you mentioned seems to be in the core.js on line 1607 which correctly addresses the fbBox. But changes on the top-parameter doesn't have an effect in my case: There's still less space to the top than to the bottom of the viewport.

I cleared the cache but with no success. Can you help me out with that issue?

Thanks,
Michael

For version 3.51, you probably want to change line 1200 in core.js from boxY = freeSpace/factor; to boxY = freeSpace/2;

Yes, that was, what I was looking for. Thanks!

Michael