Foros del Web » Creando para Internet » CSS »

Help! Acerca Lightbox

Estas en el tema de Help! Acerca Lightbox en el foro de CSS en Foros del Web. Hola a todos: Postee este mensaje en otro foro y me respondieron que buscara unos archivos acerca de lightbox, pero tengo algunos problemas con parte ...
  #1 (permalink)  
Antiguo 03/09/2007, 23:11
Avatar de j_morales  
Fecha de Ingreso: agosto-2007
Ubicación: Santiago, Chile
Mensajes: 38
Antigüedad: 10 años, 3 meses
Puntos: 0
Help! Acerca Lightbox

Hola a todos:

Postee este mensaje en otro foro y me respondieron que buscara unos archivos acerca de lightbox, pero tengo algunos problemas con parte de las imagenes que carga el efecto y buascando más información en Dinamic, encontre esto:

Cita:
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
En el CSS que incluye, no hace referencia a esto: close.gif; lightbox.js y loading.gif; y en consecuencia no se ven cuando carga el efecto.

Mi pregunta es, si alguien tiene el lightbox.css que las incluya y que lo pueda postear.

agracedida

Jeanette
  #2 (permalink)  
Antiguo 04/09/2007, 13:13
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Help! Acerca Lightbox

Has entendido mal la explicacion...

Cita:
Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
Tienes que fijarte en el archivo javascript lightbox.js si has ubicado bien estas imagenes, no en el css.

Si despues de esto todavia no puedes hacerlo funcionar, avisame, yo tengo el lightbox corriendo en varios sitios.

Saludos.
  #3 (permalink)  
Antiguo 04/09/2007, 13:39
Avatar de j_morales  
Fecha de Ingreso: agosto-2007
Ubicación: Santiago, Chile
Mensajes: 38
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Help! Acerca Lightbox

mbavio:

He revisado todo incluyendo el javascript lightbox.js e igual no me carga esas imagenes; pero funciona el efecto y muestra la "imagen-1.jpg" y necesito hacer funcionar varias imagenes, pero como no se css solo se modifiar el path.

gracias
  #4 (permalink)  
Antiguo 04/09/2007, 13:49
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Help! Acerca Lightbox

Fijate en este sitio...

Ahi tengo implementado el lightbox sobre los productos. Si necesitas mas ayuda, escribeme un privado y lo vemos paso a paso. Saludos.
  #5 (permalink)  
Antiguo 04/09/2007, 14:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Re: Help! Acerca Lightbox

Muy al principio de lightbox.js tienes estas variables que tienes que cambiar o no para que apunten a donde tienes las imágenes:
Código:
var fileLoadingImage = "/images/loading.gif";		
var fileBottomNavCloseImage = "/images/close.gif";
Las imágenes de prev.gif y next.gif si están referenciadas en el archivo CSS (lightbox.css).

También tienes que llamar al .css y a los .js desde el head de la página:
Código:
 <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"></script>
 <script type="text/javascript" src="js/lightbox.js"></script>
Ya solo resta poner un atributo en el enlace de la imagen, rel:
Código HTML:
<a href="imagenes/imagen.png" rel="lightbox"><img src="imagenes/imagen.thumb.png" /></a> 
Para que las imágenes pertenezcan a un grupo (para poder usar anterior y siguiente), tienes que poner en rel algo así:
Código HTML:
<a href="imagenes/imagen1.png" rel="lightbox[galeria1]"><img src="imagenes/imagen1.thumb.png" /></a>
<a href="imagenes/imagen2.png" rel="lightbox[galeria1]"><img src="imagenes/imagen2.thumb.png" /></a>
<a href="imagenes/imagen3.png" rel="lightbox[galeria1]"><img src="imagenes/imagen3.thumb.png" /></a> 
Espero haberte ayudado.

¡Un saludo!

PD: Estaría bien evitar los privados para brindar ayuda, que aunque la intención sea buena, la ayuda siempre le puede venir bien a otra persona.
  #6 (permalink)  
Antiguo 04/09/2007, 14:18
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Help! Acerca Lightbox

La idea del privado era no extender este post hasta el hartazgo. PEeor tienes razon, deberia haber dado ayuda por aqui. Por cierto, genial tu explicacion!

Saludos.
  #7 (permalink)  
Antiguo 05/09/2007, 15:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Re: Help! Acerca Lightbox

Hi Bonez.
¿Te gusta el más difícil todavía?.
Pues aquí va para todo "magister"
¿Sería posible definir "globalmente" que todas las imágenes al pincharlas se mostrasen con este efecto sin tener que colocar en todos y cada uno de los enlaces
Cita:
Ya solo resta poner un atributo en el enlace de la imagen, rel:
Código HTML:
<a href="imagenes/imagen.png" rel="lightbox"><img src="imagenes/imagen.thumb.png" /></a>
Gracias de antemano
  #8 (permalink)  
Antiguo 05/09/2007, 16:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Re: Help! Acerca Lightbox

La teoría sería encontrar donde hace referencia lightbox para encontrar las imágenes con el atributo rel=lightbox, y cambiarlo para que busque en las etiquetas IMG. No soy demasiado espabilado en javascript lamentablemente.
Puedes preguntar a la gente del foro de javascript, que son unos genios.
  #9 (permalink)  
Antiguo 05/09/2007, 16:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Re: Help! Acerca Lightbox

Mirando el código, estoy casi seguro que la cosa anda por aquí:
Código:
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}
Tal vez también se puede hacer que todas las imágenes enlazadas ejecuten "myLightbox.start(this);".
  #10 (permalink)  
Antiguo 12/09/2007, 10:19
Avatar de j_morales  
Fecha de Ingreso: agosto-2007
Ubicación: Santiago, Chile
Mensajes: 38
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Help! Acerca Lightbox

No amigos la cosa va por aqui:
Cita:
var fileLoadingImage = "lightbox/images/loading.gif";
var fileBottomNavCloseImage = "lightbox/images/closelabel.gif";
espero que a otros les sirva, puesto que ya me funcionó gracias a este foro.

Pero ahora quiero mejorarlo, me gustaría que en lugar de irse a negro, se fuera a otro color, talvez un gris o transparente.

Alguna idea?
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 00:10.