Lightbox image viewer positioning

**HalfABeing** · 08-17-2010, 09:41 PM

1) Lightbox image viewer 2.03a

2) http://www.dynamicdrive.com/dynamici...box2/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:

Code:

#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:

Code:

#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:

Code:

portfolio/images/nextlabel.gif

and the css file is:

Code:

portfolio/css/lightbox.css

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

Code:

portfolio/mall.css

Then the path would be:

Code:

images/nextlabel.gif

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

Code:

/images/nextlabel.gif

or the absolute path:

Code:

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):

Code:

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

It needs to be:

Code:

#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:

Code:

<!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):

Code:

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.

Thread: Lightbox image viewer positioning

Thread Tools

Search Thread

Lightbox image viewer positioning

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions