I am trying to get this CSS Lightbox to work how I want it to and I am doing somthing wrong or somthing that is not possible (though I think it is
just me doing somthing wrong).
My problem: The lightbox bax with the pictures... I am trying to get the pictures to display BELOW the box that I have the thumbnails in. If I take
of the DTD and remove the box around the thumbnails I can KINDA get it to work but I know whithout the DTD it will most likeliy look different in
certain browsers and obviously if it works without the DTD but not with it then there is somthing wrong.
BDx13 - 1-13-2010 at 11:31 AM
post a link to the original script.XnMeX - 1-13-2010 at 01:35 PM
this is helpful, but i mean the original script. where you originally got the script from - hit me with a link to that site so i can see what this is
supposed to do.BDx13 - 1-13-2010 at 02:29 PM
never mind.
find this:
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 175;
left: 9px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
replace with this:
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 175;
left: 9px; /*position where enlarged image should offset horizontally */
top: 200px; /*position where enlarged image should offset vertically */
z-index: 50;
}
adjust those two numbers - 9 and 200 - until the fullsize images display where you want them.XnMeX - 1-13-2010 at 02:36 PM
THANK YOU!!! I had been trying to figure this out on my own with no luck. I think I had tried putting "vertical" in there instead of "top" for the
adjustment. Duh!
PERFECT!BDx13 - 1-13-2010 at 03:02 PM
keep reading up on w3school.
top, left, bottom & right are basic principals of positioning in the css box model.
move that shit!wez138 - 1-13-2010 at 03:15 PM
wow, i never knew you guys spoke chinese.XnMeX - 1-13-2010 at 03:16 PM
Now I am trying to center it and not having luck. I figure it has to do with that same block of code. I am able to center the main box but I am
trying to center where the images display.
I hit up W3 but it's still not clear to me...BDx13 - 1-13-2010 at 03:18 PM
center what?
tthe whole thing in the middle of the page?
or the fullsize images when they display below the thumbs?XnMeX - 1-13-2010 at 03:32 PM
Quote:
Originally posted by BD
the fullsize images when they display below the thumbs?
The displayed images. I have the thumbs incorporated into a centered webpage just fine but the displayed images come off on the left. I know I could
add pixel size to the left but then that would make it look right on my resolution but not other peoples.
If I am being a pain in the ass, let me know! BDx13 - 1-13-2010 at 04:45 PM
first... delete this line:
top: 175;
not sure how i missed that the first time.
without tearing the whole thing apart, the centering of the fullsize images gets a littl tricky.
you can fake the centering by making all the full size images the same width, however.
lets say the thumbnail bar is 450px wide and all of your fullsize images are 300 pixels wide. divide the difference in half, then make that the value
for your left positioning.
wez138 - 1-13-2010 at 04:49 PM
And fluent esperanto.XnMeX - 1-13-2010 at 05:11 PM
Quote:
Originally posted by BD
lets say the thumbnail bar is 450px wide and all of your fullsize images are 300 pixels wide. divide the difference in half, then make that the value
for your left positioning.
Would work for my resolution but not others or if the window is minimized / maxamized differently... Here are some screen shots of what I mean.
With no mouse action
Mouse over thumbnail (maximized)
Mouse over thumbnail (not maximized)BDx13 - 1-13-2010 at 05:41 PM
it can still be done. the positioning has to be coded as 'relative' to a bounding box, not 'absolute' to the browser window.
