Lightbox 2

Fr. Jessip

does anyone know where to get a clear guide to using lightbox, the one on the website has lost me a little bit

Webmonkey

There isn't too much to it really?

http://www.huddletogether.com/projects/lightbox2/#how

Can't get much more simplier than that. What problems are you having?

louie

What seems to be the problem?
As Webmonkey said there isn't much to it.

Fr. Jessip

ok well firstly i should point out my knowledge of html is not great but here is the problem, thanks in advance.

1- i have no problem with step 1
2- do you just add in step 2 underneath step 1 in the header?
3- dont understand this at all

activate
1- im having problems with getting the image right. i can get a link and it opens the picture in a new window but without the lightbox. it keeps coming up as image source and not as "images/image-1.jpg" in the html
How to Use

Part 1 - Setup

1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order). <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>
2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a><a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a><a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

aidan_walsh

Can you post what you have written yourself, so that we can see where the problem might be?

Fr. Jessip

here it is:


ok well firstly i should point out my knowledge of html is not great but here is the problem, thanks in advance.

Set-up
1- i have no problem with step 1
2- do you just add in step 2 underneath step 1 in the header?
3- dont understand this at all

Activate
1- im having problems with getting the image right. i can get a link and it opens the picture in a new window but without the lightbox. it keeps coming up as image source and not as "images/image-1.jpg" in the html

aidan_walsh

Sorry, the HTML you have written.

cgarvey

Fr. Jessip wrote: »

Set-up
1- i have no problem with step 1
2- do you just add in step 2 underneath step 1 in the header?
3- dont understand this at all

2. Yes (as you'll see from the index.html in the Zip download)
3. Line 16/17 of the lightbox.css (in the Zip download) referennces prev and next GIF files. You need to update those URLs if you move the image files (from their current location in the images folder in the Zip download).

Fr. Jessip wrote: »

Activate
1- im having problems with getting the image right. i can get a link and it opens the picture in a new window but without the lightbox. it keeps coming up as image source and not as "images/image-1.jpg" in the html

That's because the lightbox hasn't been initialised properly (and that is the default behaviour users without JavaScript will see).

I'd recommend using the included sample (index.html) and changing it bit by bit to match what you're trying to do.

Fr. Jessip

ok here is what i typed in in html.

i have moved a step forward in that the picture does appear on the page but when i click on it i get a blank page in a new window. any ideas?

<!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"></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="lightbox2.04/images/image-1.jpg" rel="lightbox"><img src="../images/thumb-1.jpg" /></a>

</body>
</html>

Webmonkey

You sure that the js folder is in the same folder as that document?

Also, if you are running it locally on your computer and with IE7, you may need to allow javascript to run.

Fr. Jessip

Can you tell me what exactly needs to be in the three folders i upload (css, images and js)

Webmonkey

Can you give a link to the website? Can tell you the problem straight away then

Fr. Jessip

i think i no my problem.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

can someone explain where the images folder should be?

Webmonkey

The Images can be anywhere. Does /images/image-1.jpg exist?

cgarvey

You need to back up here! Walk before you run. That's why I suggested just using the example in the ZIP file you downloaded as a starting point. Do what they did (which works), and tweak to your taste then. You'll see in that zip file the images folder and the css folder are in the same folder as the index.html (which includes relative references to those folders). You should probably do the same, unless you've learnt the principles involved and are happy to change it around.

Fr. Jessip

Ok folks, i have copied their sample line for line, subbed in my pics and i uploaded all the files but i think the problem is with my link to the css.

the pic is there and when you click on it it opens in a new winow but not lightbox effect.


here's the link any idea

http://www.piarasphoto.com/

louie

the path to the js files is wrong or the files are not on the server.
try using the full path when referencing the js scr.

Evil Phil

The links for you js files and css are incorrect.

Where it says css/lightbox.css it should read lightbox2.04/css/lightbox.css

Same for the javascript links js/prototype.js should read lightbox2.04/js/prototype.js and so on for the others.

I also notice that you <head> element doesn't have a closing tag, you </body> element doesn't have an opening tag. You've deleted them somehow.

louie

there is the path

http://www.piarasphoto.com/lightbox2.04/js/lightbox.js

no wonder you can not get it working.

Fr. Jessip

thanks all, that worked. but one more thing even though its only a small problem.the next and previous buttons work but dont appear i checked them in the css but im not sure what it should say, at the mo i have it as

#prevLink:hover, #prevLink:visited:hover { background: url(lightbox2.04/images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(lightbox2.04/images/nextlabel.gif) right 15% no-repeat; }


and also if u click on the link, why does lightbox leave a strip of white along the right of the page?

Thanks

Webmonkey

Try changing

#prevLink:hover, #prevLink:visited:hover { background: url([B]lightbox2.04/images/prevlabel.gif[/B]) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url([B]lightbox2.04/images/nextlabel.gif[/B]) right 15% no-repeat; }

to

#prevLink:hover, #prevLink:visited:hover { background: url([B]../images/prevlabel.gif)[/B] left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url([B]../images/nextlabel.gif[/B]) right 15% no-repeat; }

Anything in CSS is relative to where the CSS file is placed on not the document it is used on.

Fr. Jessip

its fully fixed now thanks all!