Lghtbox2 Why on earth isn't this working for me?

**momonline** · 12-03-2006, 04:38 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:

Why is this not working for me? I can't figure out what's missing.

Here's a link to my site:
www.makeovermagic.org/index2.htm

--or--

<html>
<head>
<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" />
</head>
<body>
<a href="1aspecialeffects3-NEWcomb.jpg" rel="lightbox[effects]">1</a>
<a href="1a1childaf.jpg" rel="lightbox[effects]">2</a>
</body>
</html>

...thanks, Marsha

**thetestingsite** · 12-03-2006, 05:06 AM

It works for me on your site with image 1, but not image 2 (because image 2 is not on the server). Are you letting the page load all the way, because I have found that if you do not let it load all the way and click an image (or link), it opens the image in the window, not in the lightbox viewer.

Hope this helps you.

**momonline** · 12-03-2006, 05:32 AM

question: are you just seeing the words "image 1" and "image 2" -- or are you seeing thumbnails first? because i don't have the thumbnails and that is what i want to appear. yes, the second image is on the server but not loading...why?

how do i get the thumbnails to appear?

**momonline** · 12-03-2006, 05:53 AM

okay, i was able to get image2 loaded -- but my question remains -- how do i get thumbnails instead of "1" and "2" appearing?

**jscheuer1** · 12-03-2006, 06:47 AM

Originally Posted by momonline

okay, i was able to get image2 loaded -- but my question remains -- how do i get thumbnails instead of "1" and "2" appearing?

First you need (and may already have) thumbnail images. Once you have those - say they are called:

Code:

image1_tbn.jpg
image2_tbn.jpg

and are located in the same directory as the larger images. Then you can do this:

HTML Code:

<a href="image1.jpg" rel="lightbox[effects]" title="effect 1"><img src="image1_tbn.jpg" border="0"></a>
<a href="image2.jpg" rel="lightbox[effects]" title="effect 2"><img src="image2_tbn.jpg" border="0"></a>

**momonline** · 12-03-2006, 07:53 PM

Thanks John, that worked. Do I need to setup a table for the best alignment of the thumbnails?

...and in order to position the the lightbox image that appears a little further down on the page, what would the code be and where would I enter it?

Marsha

**jscheuer1** · 12-03-2006, 09:40 PM

You don't need a table for 'best alignment'. Tables are often easiest though for folks not familiar with the more recent and more economical (code and load time wise) elements like <div>, <span>, <br>, etc. styled using css that can be employed. What you have on your demo page right now, with one </p> that has no opening <p> tag and a <p> tag later, after everything else in the body, that has no closing </p> would confuse most browsers though:

Code:

<body>
<a href="image1.jpg" rel="lightbox[effects]">
<img src="image1_small.jpg" border="0" width="100" height="80"></a>
 </p>
<a href="image2.jpg" rel="lightbox[effects]">
<img src="image2_small.jpg" border="0" width="100" height="80"></a>

<p>

</body>

I would suggest that you use a title attribute for the links as shown in my previous post (they can be whatever you like) or use an empty title with one space character included:

Code:

<a href="image1.jpg" rel="lightbox[effects]" title=" ">
<img alt="" src="image1_small.jpg" border="0" width="100" height="80"></a>

as, otherwise some browsers will show 'null' where the title would go. If you use the one space title for the link, you need an empty alt for the image. Alt attributes (even if empty) are required for valid HTML anyway.

OK, now on to positioning the lightbox effect lower, find this in lightbox.css:

Code:

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

Change it to:

Code:

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

You can use any value you like (within reason) for the 50px I've inserted.

**momonline** · 12-03-2006, 10:25 PM

John, thanks again. so far, so good.

www.makeovermagic.org/index2.htm

did i fix the <p> issue properly -- i opened and closed it, although i am not certain if i placed them properly.

Marsha

p.s. is the lightbox centered by default -- it's hard to tell by my images because they are big and look centered -- if it is not centered by default, where would i change that?

**jscheuer1** · 12-03-2006, 10:35 PM

The p tags are now valid but, do little or nothing in your current layout. They will create line breaks with other content before and after them though, if you were to add it.

Yes, lightbox by default is centered.

**momonline** · 12-06-2006, 07:26 PM

ok - so far so good!

...when viewed in IE brower, though, there is a rectangle that appears just under the mouse on mouseover -- it doesn't happen in firefox -- can i get rid of this?

http://www.makeovermagic.org/index2.htm

Marsha

Thread: Lghtbox2 Why on earth isn't this working for me?

Thread Tools

Search Thread

Lghtbox2 Why on earth isn't this working for me?

Bookmarks

Bookmarks

Posting Permissions