PDA

View Full Version : 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/dynamicindex4/lightbox2/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
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:


image1_tbn.jpg
image2_tbn.jpg

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


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


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


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


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

Change it to:


#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

jscheuer1
12-06-2006, 09:01 PM
in IE brower, though, there is a rectangle that appears

You didn't use the empty alt attribute as suggested for the img tags:



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

Make sure that it is completely empty, unlike the title attribute for the link tag, without even a space in it.

momonline
12-06-2006, 09:43 PM
Oops... what happened is that I accidently erased the entire script and had to retype it, and I omitted that by mistake. I'll add that right now.

Thanks again!!

Marsha

shahzadmasih
12-07-2006, 01:17 PM
Hi, This post is very informative, however I would like some specific information. If someone can help me then please send me a private message. Best Regards,

jscheuer1
12-07-2006, 06:21 PM
Hi, This post is very informative

No it isn't, looks like it might be a disguised ad for your sites listed in your tag line. If you really want help, give us a clue what it is about. Otherwise, I will report this as a spam post. If you are sincere, accept my apologies and, as I say, give us a clue as to the project/problem you have in mind.

momonline
12-07-2006, 10:13 PM
Hi John,

I am almost finished with my site update (I couldn't have done it without your help!):

www.makeovermagic.org/index2.htm

Can you please tell me if it is possible to center the page with one simple code addition?

Thanks, Marsha

EDIT: John, also, can you take a look at my contact page and let me know how I edit the script for an upload; I have absolutely no idea how to do this. The browse option works, but not when you click on submit. Is this too over my head to do or is it simple?