Here is the coding for my page (
http://www.cognizantcog.com/car.html). I use Dreamweaver, sou you should be able to just copy/past this code in, then change the filenames to your liking.
HTML:
(put this in the header, just before the body)
<!-- Hide from old Browsers
var width,height
var image,ext
var cond1,cond2
function transferview(image,width,height) {
if (width==0) cond1=" "
else cond1="width="+(width+20)+"";
if (height==0) {cond2=" "
scroll="yes"}
else {cond2="height="+(height+70)+""
};
var s1 ="<TITLE>Image</TITLE>"
var s15="<BODY style='background-color: black'>"
var s2 ="<CENTER><IMG SRC= '"+image+"' BORDER=0>"
var s3 ="<FORM><INPUT TYPE='image' name='imageField' src='images/close_button.jpg' VALUE='Close Window'"+
" onClick='self.close()'>"
var s4 ="</FORM></CENTER></BODY>"
ImageWindow=window.open("", "newwin"+width,"toolbar=no,scrollbars="+scroll+",menubar=no,"+cond1+","+cond2);
ImageWindow.document.write(s1+s15+s2+s3+s4)
ImageWindow.document.close()
}
-->
</SCRIPT>
<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" />
(this goes in the body and refrences the picture location)
<ul id="picturelist">
<li><a href="images/logo.jpg" rel="lightbox[roadtrip]"><img src="images/thumb_logo.jpg" width="60" height="60" alt="" /></a></li>
You should be able to go from there. As you can see, you need the lightbox css to go in the 'text' folder. Also, place the images in an 'image' folder. I dont know too much abotu web stuff, but I had the same problem that you had to get it working. Let me know if I can help you more.