Imágenes en lightbox

mjsaxo · #1 (**permalink**) 09/11/2009, 17:27

Hola.

Estoy intentando poner imágnes en mi Web de forma que al pincharlas se vean en grande sin que la página cambie, sino que el fondo se difumina, se hace más opaco.

Encontre en internet información mediante el jquery, pero algo me falla, y no se si el error estará en la hoja de estilos o en la Cabecera de la página, en su Código.

Si alguien sabe los pasos a seguir, lo agradecería.

Saludos.

kseso? · #2 (**permalink**) 09/11/2009, 18:09

JabierB dixit:

Cita:

Tienes un error en la línea 13

Y otro en los colores que elijes.

cristian_cena · #3 (**permalink**) 09/11/2009, 18:12

Preguntale a deirdre, el conoce al adivino del foro.

p/d: si no pones que es lo que falla entonces como vamos a saber donde esta la falla . Puede que esten mal escritos los estilos de tu lightbox o que ocurra algun problema en la cabecera de tu página, pero seguro que algo del código no anda bien,

y éste puede ser javascript, html y/o css

Nos vemos

mjsaxo · #4 (**permalink**) 10/11/2009, 06:28

Hola.

Perdonad, es que no he entrado en detalle de lo que me sucedía. Resulta que al pinchar en la foto, no sale el efecto de lightbox, sino que aparece en una página nueva.

He seguido los pasos de algunos tutoriales de como hacerlo, pero se ve que hay algo que hago mal. Estas son las páginas que he seguido, y lo que no entiendo es concretamente los dos últimos pasos.

zonamasters.com/2009/07/10/jquery-lightbox-plugin-ejemplo-lightbox/
anieto2k.com/2007/10/15/jquery-lightbox-plugin-mejora-el-visionado-de-imagenes/

Me podríais dar unós pasos concretos de como hacerlo?....

Muchas gracias.

cristian_cena · #5 (**permalink**) 10/11/2009, 06:48

mmm... me parece que necesitaras plantear este tema en el foro de librerias javascript. O bien dejarle un comentario a andres nieto. pues es imuy dificil saber que sucede si nos das el tutorial así nomas sin código propio (tuyo) elaborado.

jomaruro · #6 (**permalink**) 10/11/2009, 13:04

Hola:

Ya que no pones el código, mejor es que compares el tuyo con el original a ver si encuentras la diferencia, funcionar tiene que funcionar.

Saludos.

GidHarvey · #7 (**permalink**) 10/11/2009, 20:27

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

mjsaxo · #8 (**permalink**) 11/11/2009, 04:53

Muchísimas gracias.

Con tu explicación lo he conseguido, era un minúsculo error, pero lo suficiente para que no funcionara.

Saludos.

GidHarvey · #9 (**permalink**) 11/11/2009, 10:37

Que bueno que solucionaste tu problema.

Un saludo.

ATTe Gidharvey