I tried to figure it out on my own first, but I just can't!

 

I'm trying to install lightbox v2 in my portfolio, but can't work it out.

 

Can anyone help me pretty please?

What bit are you stuck with Helen?

What bit are you stuck with Helen?

 

Hang on I may have got it. I'll be back in a mo'

Since you didn't specify exactly which part it is you're having trouble with, I shall try to explain step by step.

 

1. Download the Lightbox package from the lightbox website.

2 Upload the relevant files to your web server (js, css and images files. Placing them in relevant directories).

3. Add this somewhere within your head tags:

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

4. In the page you want to include your lightbox in, find where the html is which places the images you want to open within lightbox. You then need to add 'rel=lightbox' within the link tag for the image, for example:

<a href="someimage_big.png" rel="lightbox"><img src="someimage_small.png" /></a>

If you want to add a caption explaining the image, you can do that by including 'title="some caption here"'

 

Hope that helps.

Thanks but I have done it Yay me!

 

But all is not quite right yet.......

 

The "x" where it says "press x to close isn't there as my links are all white. Anyone have a solution?

You need to open up lightbox.css and make sure the links to the images in the CSS correspond to where you have them saved. (Hopefully i've managed to be of some help this time) .

Thanks for the help

 

It's the bottom "x" that's the problem.

 

I have uploaded all the files to my site. Go to portfolio and click on "Of" or "Rc" thumsnails and you will see what I mean

It is inheriting the styles from www.iridium-design.co.uk/iridium%20style.css

Line 36 according to Firebug

Thanks for the help

 

It's the bottom "x" that's the problem.

 

I have uploaded all the files to my site. Go to portfolio and click on "Of" or "Rc" thumsnails and you will see what I mean

 

In litebox.js check the following image locations are right

 

var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";

 

Pat

It is inheriting the styles from www.iridium-design.co.uk/iridium%20style.css

Line 36 according to Firebug

 

Absolutly correct! Is there anyway of overriding this?

Put this in your css

#keyboardMsg a:link {
color:whatever;
}

Put this in your css

#keyboardMsg a:link {
color:whatever;
}

 

OMG! you are amazing!

 

*Bows down and worships at the caped crusaders feet*

OMG! you are amazing!

 

*Bows down and worships at the caped crusaders feet*

Don't lift your head too quickly!

The pants haven't been washed in a while

 

*note my custom title*

Looks good now. Might want to change the default color of the 'x' to something other than white though. It's only visible once rolled over at the moment.

Don't lift your head too quickly!

The pants haven't been washed in a while

 

*note my custom title*

 

Eeeeeeeeeeewww! I thought there was a funny smell! I just thought you had stepped in something! (or let one go!)

Quick question, Can I add a link within the caption (title attribute) on lightbox?

Since you didn't specify exactly which part it is you're having trouble with, I shall try to explain step by step.

 

1. Download the Lightbox package from the lightbox website.

2 Upload the relevant files to your web server (js, css and images files. Placing them in relevant directories).

3. Add this somewhere within your head tags:

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

4. In the page you want to include your lightbox in, find where the html is which places the images you want to open within lightbox. You then need to add 'rel=lightbox' within the link tag for the image, for example:

<a href="someimage_big.png" rel="lightbox"><img src="someimage_small.png" /></a>

If you want to add a caption explaining the image, you can do that by including 'title="some caption here"'

 

Hope that helps.

 

You just helped me out with installing Lightbox2 on my site via an email I sent you. Unfortunately I still cant make it work. When I click on my thumb the bigger pic comes up on a new page with no effects. I suspect I have not placed my downloaded files at the right place in my directory.

Can you or someone similarly smart help me out cause this drives me crazy!

Thanks!

You just helped me out with installing Lightbox2 on my site via an email I sent you. Unfortunately I still cant make it work. When I click on my thumb the bigger pic comes up on a new page with no effects. I suspect I have not placed my downloaded files at the right place in my directory.

Can you or someone similarly smart help me out cause this drives me crazy!

Thanks!

 

I have to refresh my page first before I can view any images in lightbox. (stupid wiindows) Have you got a link to your site so we can have a look at the code?

@martinw If you're just getting the larger picture with no effects, it suggests that lightbox.css isn't being linked to.

Check that you have specified the correct path to the file.

@martinw If you're just getting the larger picture with no effects, it suggests that lightbox.css isn't being linked to.

Check that you have specified the correct path to the file.

 

But he does also say that the images also open on a new page. Which would suggest that the js files aren't being linked to correctly either, right? It's hard to say without anything to look at..

 

Martin, it would be helpful if you post a link to your site or the code you are using in order for us to be able to diagnose the problem and help you further.

But he does also say that the images also open on a new page. Which would suggest that the js files aren't being linked to correctly either, right? It's hard to say without anything to look at..

 

Martin, it would be helpful if you post a link to your site or the code you are using in order for us to be able to diagnose the problem and help you further.

 

 

OK, here is the 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><script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

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

 

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Untitled Document</title>

</head>

 

<body>

<a href="jack.jpg" rel="lightbox"><img src="jack-zoom-gr.jpg" width="50" height="50" border="0" /></a>

</body>

</html>

 

And the page is www.wickstromillustration.com/test

 

Hopefully you´ll be able to tell where I´ve gone wrong! Thanks.

Your lightbox files (both javascript and css) don't appear to be where your linking to.

Double check that they are on your server in the correct place.

Your lightbox files (both javascript and css) don't appear to be where your linking to.

Double check that they are on your server in the correct place.

 

I noticed the same thing. @ Martin. Make sure the js files are all in a folder named 'js' and the css file is in a folder called 'css'. Since they're the directories you're currently linking to in your html.

 

EDIT: I've had another quick look and can see that what you've actually done is uploaded all the required files to the root directory of your webserver. Ensure the js files are in a folder named 'js' and the css file is in a folder called 'css', or alternatively remove the folder names 'js' and 'css' from your html. Should all work fine then.

I noticed the same thing. @ Martin. Make sure the js files are all in a folder named 'js' and the css file is in a folder called 'css'. Since they're the directories you're currently linking to in your html.

 

EDIT: I've had another quick look and can see that what you've actually done is uploaded all the required files to the root directory of your webserver. Ensure the js files are in a folder named 'js' and the css file is in a folder called 'css', or alternatively remove the folder names 'js' and 'css' from your html. Should all work fine then.

 

 

Thank you SOOO much, I finally got it to work!

Have a great 4th of July!

Quick question, Can I add a link within the caption (title attribute) on lightbox?

 

This got a bit hidden I noticed, yes you can but you have to be careful with single and double quotation marks.

 

<a href="/images/picture.jpg" rel="lightbox" title="<a href="page.html">Page</a>">

won't work

<a href="/images/picture.jpg" rel="lightbox" title="<a href='page.html'>Page</a>">

will

This got a bit hidden I noticed, yes you can but you have to be careful with single and double quotation marks.

 

<a href="/images/picture.jpg" rel="lightbox" title="<a href="page.html">Page</a>">

won't work

<a href="/images/picture.jpg" rel="lightbox" title="<a href='page.html'>Page</a>">

will

That is also wrong. I am pretty sure you are supposed to use < for < and > for > in the title.

<a href="/images/picture.jpg" rel="lightbox" title="<a href='page.html'>Page</a>">

 

I just tried that, and it seems to work fine. Well in Firefox anyway. It was quote rather than apostrophe marks that had thrown me until I read this post.

 

Cheers everybody!