Help please, with Lightbox image viewer!

**lilymc** · 03-02-2007, 06:49 AM

1) Script Title: Lightbox image viewer 2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I know this has been asked before, but I read some of the old threads and still wasn't able to fix my problem. It just doesn't work. The image opens up in a new browser window... I've tried everything, and nothing works. I'm no expert with this stuff, so, go easy on me!

**jscheuer1** · 03-02-2007, 06:51 AM

Please supply a link to your problem page so that we may assist you.

**lilymc** · 03-02-2007, 07:03 AM

Well, I haven't uploaded it to the web yet, but I'll copy and paste the code for you...

I put this in the <head> section, as it said to:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

And then here is my HTML code on the photos page:

<a href="images/swimmingpool1.jpg" rel="lightbox" title="Puerta del Mar Swimming Pool"><img src="images/swimmingpool1_thumb.jpg" border="0" /></a>

I'm pretty sure I did everything the directions said to do, but it's not working. Btw, I tried the first version earlier, and that one did (sorta) work, but the window that popped up didn't look quite the way it was supposed to. There was no white border/background around the photo, just a purple line that looked bad, and the caption letters were in black which didn't show up on my dark colored page. I went to the css file to make changes, but none of the changes worked. So I just started a fresh page and tried version 2.0 instead, and as I said, that one doesn't work at all for me.

Thanks!

**lilymc** · 03-02-2007, 09:05 AM

Never mind, I figured out the problem.

I might have some other questions on this though, so.... if I do I'll be back! Thanks anyway!

**lilymc** · 03-05-2007, 11:29 PM

I have another question.

I want to change where the "next" and "previous" graphics are located... Right now, they are on the upper right and left of the photo, but I want to put them in the bottom border (on the white part) so it's easier to see them, and also if possible I just want it to stay there... right now it only appears when you put your mouse over it.

I know that I have to change this in CSS, but I'm not an expert on this.

Here's what the code says now:

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

Please let me know the correct way to change the code so the prev and next are at the bottom.

Thank you!

**jscheuer1** · 03-06-2007, 07:08 AM

It's a little more complicated than that. Here's what I came up with (additions/changes red):

Code:

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

#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;
	bottom: -20px;
	left: 0;
	height: 30px;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 30px!important;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right;background: url(../images/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { }
#nextLink:hover, #nextLink:visited:hover {  }


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

#imageData{
	padding:20px 10px 0 10px;
	}
#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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}

Notes: I may have previously made other changes but, I think that the red ones are all that would be required for this.

**lilymc** · 03-06-2007, 08:00 PM

Thank you very much, I'll try that!

Sorry for the late reply.

**lilymc** · 03-06-2007, 09:17 PM

Ok, I hope you don't think I'm being too picky.... It looks pretty good, even though I actually wanted the prev and next graphics to be lower, and sort of in between the caption and the X close button....not in the very middle, but the prev a bit to the left, and the next a bit to the right.

I guess it's ok where you put them, except for one minor problem. (Sorry, when it comes to aesthetics, i'm kind of a perfectionist!)

On a few of the images, the top part of the prev and next graphics show up on the photo, instead of being flush with the border. I only noticed that on 3 or 4 pictures, but if possible, I don't really want it to do that....

Here's what I mean, I did a screen shot:

Image removed by ddadmin as requested. For future requests regarding editing/ deleting a post, please pm me directly.

Can you see how the prev and next graphics come up a bit too high on the image? It's not a huge deal, but if there's a way to fix that, that would be great.

Thanks again!
(sorry for being a pain)

**jscheuer1** · 03-06-2007, 09:30 PM

I can't seem to see your screen shot, it keeps asking for a name and password. Anyways, I worked out those styles for images I just happened to have lying around. They could be tweaked. It might be best if you tweaked them seeing as how you would best know how you want it to look. Also, I could tell much more from a link to your page than from a screen shot.

**lilymc** · 03-06-2007, 10:44 PM

That's weird that it's asking you for a name/password to see the image. (I just bought my own webspace for another site, and I was trying to use it to host the picture.) Can you do me a favor and edit my post and remove the img code to that photo? Thanks!

Ok, I think I know how to fix the problem. I think a few of the photos (maybe 3 or 4) are a bit too big, and I need to resize them.

I uploaded the page, here's the link if you want to take a look: http://www.puertadelmar.net/photos.html

Can you tell me if it's taking a long time for the larger size photos to load for you? And also, if you think it's fine the way it is? (It's not a big deal to have the prev and next graphics there, as long as I can fix the little problem now, with some of them overlapping the photo)

Thread: Help please, with Lightbox image viewer!

Thread Tools

Search Thread

Help please, with Lightbox image viewer!

Bookmarks

Bookmarks

Posting Permissions