Bueno espero ayudarte con esto que hice rapidin viendo tu problema, a mi tambien me paso y tuve que leerme varios tutoriales hasta que entendi el metedo, ya que era principiante me costo entenderlo...
Esta con Comentarios por si no entiendes que es lo que tienes que hacer...pero si te molestan mas abajo te lo pongo sin comentarios, espero haber ayudado.
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<!-- Tienes que adjuntar por asi decirlo a tu html el CSS del lightbox que bajaste en este caso aqui te pongo un ejemplo del lightbox v2.04 una vez que tengas adjuntado esto entre los <head></head> tienes que pones los que te dire acontinuacion-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!----- luego de que tengas puesto el css puede proceder a poner estos que estan abajo OJO los puedes poner en el orden que quieras si asi lo prefieres, tienes que tener en cuenta que esten puestos en la raiz de tu sitio en las mismas carpetas si no es asi no te funcionara el script el link de las carpetas por asi decirlo es donde dice abajo src="js/"----->
<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>
<!-- Bueno ahora en el entre <body></body> pondras las imagenes-->
<!-- <img src="images/AQUI TU IMAGEN.jpg"/> hay tendras que poner tu imagen en el formato que quieras chica,media o grande.-->
<!-- <a href="images/image-1.jpg" rel="lightbox[roadtrip]" > y esto es el vinculo de tu imagen, que por cierto se abrira en el lightbox ojo que a cada vinculo de la imagen tienes que ponerle el ACTIVADOR DEL LIGHTBOX que seria rel="lightbox[roadtrip]" este activador es para una galeria para que se muestre una sola imagen y no te salgan los botones preview o next tienes que poner rel="lightbox" solamente-->
<!-- si me falto por explicar otra cosa disculpen lo hice rapido-->
</head>
<body>
<a href="images/TUIMAGEN.jpg" rel="lightbox[roadtrip]" ><img src="images/TUIMAGEN.jpg" width="100" height="40" /></a>
<a href="images/TUIMAGEN.jpg" rel="lightbox[roadtrip]" ><img src="images/TUIMAGEN.jpg" width="100" height="40" /></a>
</body>
</html>
Sin comentarios en el HTML
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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>
</head>
<body>
<a href="images/TUIMAGEN.jpg" rel="lightbox[roadtrip]" ><img src="images/TUIMAGEN.jpg" width="100" height="40" /></a>
<a href="images/iTUIMAGEN.jpg" rel="lightbox[roadtrip]" ><img src="images/TUIMAGEN.jpg" width="100" height="40" /></a>
</body>
</html>
saludos ATTe Gidharvey
