Foros del Web » Creando para Internet » CSS »

Imágenes en lightbox

Estas en el tema de Imágenes en lightbox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/11/2009, 17:27
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 6 meses
Puntos: 0
Imágenes en lightbox

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.
  #2 (permalink)  
Antiguo 09/11/2009, 18:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imágenes en lightbox

JabierB dixit:
Cita:
Tienes un error en la línea 13
Y otro en los colores que elijes.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/11/2009, 18:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imágenes en lightbox

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
  #4 (permalink)  
Antiguo 10/11/2009, 06:28
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Imágenes en lightbox

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.
  #5 (permalink)  
Antiguo 10/11/2009, 06:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imágenes en lightbox

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.
  #6 (permalink)  
Antiguo 10/11/2009, 13:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Imágenes en lightbox

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.

  #7 (permalink)  
Antiguo 10/11/2009, 20:27
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Imágenes en lightbox

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
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #8 (permalink)  
Antiguo 11/11/2009, 04:53
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Imágenes en lightbox

Muchísimas gracias.

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

Saludos.
  #9 (permalink)  
Antiguo 11/11/2009, 10:37
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Imágenes en lightbox

Que bueno que solucionaste tu problema.

Un saludo.

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:31.