Imagenes Que Se Ven Sobrepuestas

j_morales · #1 (**permalink**) 31/08/2007, 15:48

Hola a todos:

Alguien sabe como se llama el efecto que resulta haciendo click sobre las imagenes, esta se ve superpusta sobre una pagina de fondo? parecido al que tiene este sitio: http://www.master-touch.com/

Mis preguntas son:

que programación es
algun tutoria en la red..

saludos

J_morales

Daniel Ulczyk · #2 (**permalink**) 31/08/2007, 17:00

Lightbox 2

Cita:

Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

Código HTML:

<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>

buzu · #3 (**permalink**) 31/08/2007, 17:08

Me imagine algo espectacular y entro para ver un ligthbox

(sarcasmo)

Si, es lightbox un efecto que fue cool cuando apareció pero que ahora es algo "común" para quienes andamos en este rollo. Solo escribo para decirte que si sabes CSS puedes lograr un buen grado de personalización en integración al sitio en cuestión con tan solo modificar los estilos....

j_morales · #4 (**permalink**) 03/09/2007, 07:00

No, no se nada de CSS, si fuera posible el codigo fuente de una pagina con el efecto. Lo agradecería mucho.

Daniel Ulczyk · #5 (**permalink**) 03/09/2007, 07:24

Si necesitás otra referencia del mismo autor, podés consultar en el sitio de Dynamic Drive, tan bien explicada la implementación como en el enlace anterior.
Lightbox image viewer 2.03

Saludos!

j_morales · #6 (**permalink**) 03/09/2007, 07:36

Si, Ok. disculpa ya descargue el enlace, muchas gracias es lo que necesitaba.

j_morales · #7 (**permalink**) 03/09/2007, 09:42

Daniel, visite el sitio sugerido, pero no domino mucho el ingles.

El efecto me funciona bien, pero lo que no funciona es que no se ven las imagenes close.gif ; closelabel.gif yo se que las imagenes las llama de la carpeta "images", pero porque no las encuentra

buzu · #8 (**permalink**) 03/09/2007, 10:16

Quiza las has puesto en otro lugar donde no van, fijate que todo, absolutamente todo va en el mismo directorio.

j_morales · #9 (**permalink**) 03/09/2007, 11:34

Si me preocupe de todo eso, por eso me parece extraño que solamente esas imagenes no se vean incluyendo el "loading.gif" que tampoco lo muestra.

Lo que pasa es que estoy haciendo funcionar esto en una Intranet y simpre me tengo que preocupar de escribir la ruta completa.

saludos y gracias por tu atencion

j_morales · #10 (**permalink**) 03/09/2007, 17:31

De todos estos archivos:

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 descargue, no hace referencia: close.gif; lightbox.js y loading.gif

Alguien mas lo hizo funcionar?

Daniel Ulczyk · #11 (**permalink**) 04/09/2007, 04:53

Cita:

en el css que descargue, no hace referencia: close.gif; lightbox.js y loading.gif

En la página que oportunamente posteé hay un enlace Download, para bajar un archivo en formato ZIP, el cual contiene las imágenes en una carpeta images.
Cuando descomprimís el archivo debés asegurarte que se respeten las opciones de nombres de carpeta. De otra manera tendrás que crear las mismas y mover allí los archivos correspondientes.

j_morales · #12 (**permalink**) 04/09/2007, 06:38

Daniel, agradezco tu paciencia.

yo baje todo, absolutamente y esta todo en su lugar, lo que pasa es que que dentro de la programacion del archivo: css/lightbox.css

cita del codigo fuente:

Cita:

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox/images/nextlabel.gif) right 15% no-repeat; }

Esto es progración en css y no sé como agregar algo más

saludos

Daniel Ulczyk · #13 (**permalink**) 04/09/2007, 08:57

Simplemente hay que re-escribir la ruta en la cual están las imágenes.
Si mal no te entiendo, entonces debiera quedar así:

Código:

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

elgery · #14 (**permalink**) 19/01/2011, 16:06

Hola, he hecho los pasos que aparecen en estos mensajes pero no llego a visualizar las imagenes con estos scripts de java. Sin embargo ellos funcionan muy bien ya que hize una pequeña prueba con un html muy simple.

Se me ocurre que puede estar pasando algun tipo de conflicto entre mi CSS principal y el de lightbox.css. De hecho, tengo tres archivos CSS distintos, aparte del de lightbox.css en mi HTML. Sera ese el problema? ya revise las rutas y estan bien.

Cualquier ayuda es bien recibida. Gracias