I have included these three Javascript files in my header : The 3 scripts are all under the js directory.
<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>
I have included the Lightbox CSS file. The css file is under the css directory
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
I have added a rel=“lightbox” attribute to any link tag to activate the lightbox.
<a href="images/not.gif" rel="lightbox" title="my caption">image #1</a>
It does not work at all… anyway I don’t understand how to get the fade effect and how to chose what to show!!!
For instance, I want to show comments, I want to show the flash player, I want to show an image …
I must be doing something really stupid but I don’t know what!!!
Here is my script:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 1</title>
<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" />
</head>
<body>
<a href="images/notes.gif" rel="lightbox" title="my caption">image #1</a>
</body>
</html>
I have checked the CSS file and make sure the referenced prev.gif and next.gif files are in the right location.
#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;
Also, I have made sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location
...
LightboxOptions = Object.extend({
fileLoadingImage: '../images/loading.gif',
fileBottomNavCloseImage: '../images/closelabel.gif',
...
HELP!!!