Results 1 to 4 of 4

Thread: Lightbox css - how to centre image in user window?

  1. #1
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Lightbox css - how to centre image in user window?

    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 http://www.dogshowcorscombemosterton...s-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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    #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.
    Last edited by jscheuer1; 07-15-2012 at 05:35 PM. Reason: add a style tweak
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •