[Plugin: Lightbox] Display problem

  • Resolved shylaz

    (@shylaz)


    16 years, 5 months ago

    Hi!
    I have a few problems with the latest Lightbox, but I don’t know where these css issues are located. If I click on an image, I have to scroll down to close it.

    Screenshot

    ligthbox.css

    #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; bottom:30%;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    Any help is appreciated!
    Regards,
    shylaz

Viewing 6 replies - 1 through 6 (of 6 total)

  • shylaz,

    Can you send a link to the page where this is happening?

    Joe

    Thread Starter shylaz

    (@shylaz)

    Of course:
    Link to the page where it happens (btw. it happens on all pages and posts, the issue is in the lightbox stylesheet).

    Regards,
    shylaz

    Shylaz, it works fine for me. However, I think from looking at your screen shot, that your problem exist from the fact that the image is to large. You might want to re size the originals to a height of 600px. 600 is the minimum screen height. Or you can try changing the following CSS code:

    #lightbox img{ width: auto; height: auto;}

    Change the height varible:

    #lightbox img{ width: auto; height: 95%;}
    Thread Starter shylaz

    (@shylaz)

    Thanks for your fast reply! But what I want to do is reducing the space between the top and the lightbox content. Any idea?

    Try changing the z-index to something like 50 or 25

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

    Thread Starter shylaz

    (@shylaz)

    That doesn’t work either. You’re right, the picture is simply too large. I added some padding, so at least it has enough place to display the close button.

    Final CSS:

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

    Thanks for your help anyway, much appreciated!

    Regards,
    shylaz

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: Lightbox] Display problem’ is closed to new replies.

Tags