PDA

View Full Version : Lightbox image viewer positioning



HalfABeing
08-17-2010, 09:41 PM
1) Lightbox image viewer 2.03a

2) http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3a) I have noticed that the script reacts to the vertical scrolling on a page but I need it to position itself correctly to the horizontal as well. I was wondering how I could accomplish this.
(I'm using a bit of JS to scroll the page to center)

3b)[SOLVED!] Also the Next and Prev buttons don't show up for me. The images are in the right folder and all.
[I combined my existing css with the Lightbox one and that didn't work for some reason, so now I have both and it works.]

The page:
http://www.downfallstudios.net/portfolio/

jscheuer1
08-18-2010, 02:47 AM
For all browsers except IE 6 and less:


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

As to 3b (I know this is resolved, but thought you might like to know what's up with it), the images pointed to:


#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; }

are relative to the css file, not to the page or anything else. Since (for example) the next image is:


portfolio/images/nextlabel.gif

and the css file is:


portfolio/css/lightbox.css

from the latter, ../images/nextlabel.gif is correct. If the css file is somewhere else, say:


portfolio/mall.css

Then the path would be:


images/nextlabel.gif

However, that's all, as I say, using the relative path. If you use the network path:


/images/nextlabel.gif

or the absolute path:


http://www.downfallstudios.net/portfolio/images/nextlabel.gif

Then it will be valid from either place.

HalfABeing
08-18-2010, 04:00 AM
Thanks for your help, but unfortunately thats not what I'm looking for. If I scroll down and open the image it will always open so the top of the image is in view. It opens relative to where I have scrolled down, thats what I want but horizontally. So that if I scroll to the right it will still open centered of my current view.
The "position: fixed;" made it stick to the view.

jscheuer1
08-18-2010, 05:04 AM
It will always be centered, try it.

HalfABeing
08-18-2010, 02:26 PM
Not for me, If I scroll to the right it will pop up centered as if I was scrolled all the way to the left. out of view if I scroll to the right.

jscheuer1
08-18-2010, 02:48 PM
What browser are you using?

Anyways, check this out:

http://home.comcast.net/~jscheuer1/side/lightbox_h.htm

HalfABeing
08-18-2010, 03:28 PM
Then whats wrong for me?
That page works
Mine doesn't, not in Firefox nor IE

This makes me sad :(

jscheuer1
08-18-2010, 03:52 PM
I see your page is still using (in the lightbox.css file):


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

It needs to be:


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

Don't worry, that means that we are probably halfway there. All I added to your page's source code was the highlighted:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.downfallstudios.net/portfolio/" />
<link href="mall.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#lightbox {
position: fixed;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<script type="text/javascript" src="gradualfader.js">

/***********************************************
* Gradual Element Fader- (c) Dynamic Dr . . .

The base tag is only required for the page because it isn't on your domain, you can skip that.

The style block is required, or its rule may be added to the existing stylesheet, just make sure to get rid of the position: absolute; for the #lightbox selector.

HalfABeing
08-18-2010, 04:45 PM
Oh, but when I have "position: fixed;" the image follows as I scroll, I was planning on having large images that possibly goes out of view, and with "position: fixed;" I cant scroll to view the hole image. and also not scroll to the Close button

jscheuer1
08-18-2010, 05:47 PM
I think you may want Fancybox:

http://fancybox.net/

or some other lightbox type script. Google is a good resource for turning up alternatives.

With Fancybox the close button is on the top, if the image is too large, there can be scrollbars on the box, and/or various other ways of dealing with it.

But your problem about not being able to scroll vertically to see larger images is at least in part that your body is overflow-y: hidden; (from mall.css):


body{
background-color:#000;
overflow-y:hidden;
}

Unless you get rid of that, you will never be able to scroll the page vertically.

Perhaps if you did get rid of it, Lightbox would work out for you.

HalfABeing
08-18-2010, 06:20 PM
No, I got rid of overflow-y:hidden; locally and it doesn't work.

I'll try Fancybox, looks nice, thank you. :)