Results 1 to 4 of 4

Thread: Lightbox2 positioning

  1. #1
    Join Date
    Apr 2006
    Location
    Wichita Falls, Texas
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox2 positioning

    Lightbox 2 image viewer
    http://www.dynamicdrive.com/dynamici...box2/index.htm
    Hey folks.

    I'm not happy where the lightbox2 "popup" is positioned on my page....but I'm not smart enough to figure out where in the script I need to tell it to be.

    I'm sure the answer is simple enough, but I'm such a noob.

  2. #2
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Lightbox 2 Image Viewer:
    http://www.dynamicdrive.com/dynamici...box2/index.htm

    I have a similar question. When the large image loads it is almost centered. I would like it to set closer to the top. The reason is that when users running 1024x768 res. open an image that is 600pixels high or taller, the close button is cut off due to positioning of the image. I have tweaked darn near every setting in the CSS I can think of that would pull the positioning up, but with no luck.

    Any help would be greatly appreciated. Sorry, I dont have it on a hosted page at the moment.

    _thaddeus
    Last edited by Thaddeus; 07-28-2006 at 04:21 PM.

  3. #3
    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

    First of all, with lightbox 2, at least on my monitor, the pop up appears in the upper portion of the screen as compared to the original lightbox. But, I can see how with large images and lower res monitors, even this would not be enough room. However, one should balance one's natural desire for size with consideration of the various resolutions currently in use. 800x600 is still not that uncommon. A 600px high image won't fit on a screen like that unless there is absolutely nothing else but the image, no browser, no taskbar, etc. With all that in mind, I have found that the pop up positioning is most easily influenced in the css by adjusting this selector's property/value pairs:

    #outerImageContainer

    For example, to move it up, give it a negative top margin:

    Code:
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	margin-top:-20px;
    	}
    Similarly, you could move it toward the upper left corner like so:

    Code:
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: -20px auto 0 50px;
    	}
    But, whereas the:

    #imageDataContainer

    will follow it vertically, if it is moved horizontally, the #imageDataContainer must also be moved a similar amount:

    Code:
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto 0 50px;
    	line-height: 1.4em;
    	}
    Last edited by jscheuer1; 07-29-2006 at 05:20 AM.
    - John
    ________________________

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

  4. #4
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    PERFECT!!!! Thank you very much for your help.

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
  •