Help! Acerca Lightbox

[j_morales]

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:

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

[mbavio]

Has entendido mal la explicacion...

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.

[j_morales]

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

[mbavio]

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.

[pzin]

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.

[mbavio]

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.

[kseso?]

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

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

[pzin]

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.

[pzin]

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);".

[j_morales]

No amigos la cosa va por aqui:

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?