Lightbox css - how to centre image in user window?

[Mark Ellis]

Hi

I've got lightbox running nicely in Google sites, but the image does not centre in the user window. So the image can appear off the top of the screen, or off the bottom of the screen.

I would like each image to centre in the window on load, so that the viewer can see the whole image as it loads. The images have been purposely resized to suite.

The website is www.dogshowcorscombemosterton.info/photos-of-2011-show

All the CSS and JS files are displayed at the bottom of the page. There are two CSS files for lightbox. One is called gallery-style.css because of the Google sites issue :)

Thanks

[jscheuer1]

Easiest solution is, don't use iframe. Put the lightbox images and scripts right on the page.

[Mark Ellis]

Easiest solution is, don't use iframe. Put the lightbox images and scripts right on the page.

Thanks.

That will need some thinking about as it's on Google Sites. So you can't upload HTML files, and can only do so much with the page's HTML code. If Sites doesn't like the code then it won't load it :(

[jscheuer1]

Well, that's still the best solution.

If you cannot do that, it looks like you've already modified the script and/or styles in an attempt to get things to work out. If so, try reverting to the originals and set the height of the iframe to a little more than the height of the tallest lightbox (about 700 I think), and its scrolling to auto.

In the lightbox.css file, change:


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

to:


#lightbox{position: fixed; left: 0; top: 20px !important; width: 100%; z-index: 100; text-align: center; line-height: 0;}

The user will have to scroll the iframe to see some of the thumbnail images. But when the lightbox presents itself, it should be in a viewable position.

This approach may require some tweaking. We may have to limit the height of the overlay, and/or position it fixed, and/or do some other style tweaks. But give it a shot. It probably will be no worse than what you currently have. And as I say we can tweak it if need be.