Página 1 de 1

Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 04 Jul 2009 23:18
por Ivan
Hola a todos. Después de probar algunas veces, ya lo realicé.

Les voy a enseñar como colocar un lightbox (imagen que se expande al cliquearla
y queda sobre toda la pantalla).


¿Qué debo tener?

» Un host para subir los archivos (yo usé Zymic, pero hay miles)
» Unas descargas obligatorias que ofrece Lokesh Dhakar
que la localizan aquí http://www.lokeshdhakar.com/projects/li ... ox2.04.zip
» Un FTP para pasar los archivos de la PC al host


Tener siempre en cuenta que todos los archivos deben estar localizados en una misma carpeta para evitar errores de localización

¿Cómo se hace?

1. Descargamos todos los archivos en una carpeta en mi PC, por ejemplo /lightbox



2. Creamos con algún editor o el bloc de notas un archivo.html llamado "BOX.html" que tendrá lo siguiente:
<html>

<head>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox.css">


</head>

<body>
<style type="text/css">
<!--

A:LINK {text-decoration: none; color: #FF0000}
A:HOVER {text-decoration: underline; color: #000000}
A:VISITED {text-decoration: none; color: #FF0000}

-->
</style>

<a href="http://www.huddletogether.com/projects/lightbox/images/image-1.jpg" rel="lightbox" title="La chica">image #1</a>

</body>


</html>

Lo que está en azul es obligatorio.
Lo que está en rojo puede ser editado.




3. Editamos el lightbox.css (hoja de estilos) con este código
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}


#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
font-family: Tahoma;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }


#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Observar bien lo que se quiere editar (como colores, fondos, textos)

Si hemos seguido bien los pasos, guardamos todo y vamos ordenando correctamente.

Deberíamos tener en nuestra carpeta /lightbox los siguientes ficheros:
close.png; lightbox.css; lightbox.js; loading.gif; overlay.gif; box.html
Donde box.html se conecta directamente con lightbox.css (close, loading y overlay) y lightbox.js



Al finalizar esto, podremos ir editando las imágenes desde box.html utilizando
como enlace palabras o imágenes más pequeñas. Eso lo dejo a su criterio.

Cualquier problema, avisar por aquí. Respondo rápidamente.

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 03:27
por nuestra_onda
Buen aporte, ya lo habia provado antes y esta muy bueno!!

XD

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 04:17
por Ivan
Me agrada que te interese :)

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 14:33
por formuloizer
¿Podrías poner algún ejemplo para poder observarlo? :D

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 17:46
por sisoma2
Si, es dios ese efecto xD
A mi me encanta... xD

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 20:26
por carlitos
sisoma2 escribióColonSi, es dios ese efecto xD
A mi me encanta... xD


Sep, yo siempre lo uso xD

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 05 Jul 2009 23:17
por Klk3
carlitos escribióColon
sisoma2 escribióColonSi, es dios ese efecto xD
A mi me encanta... xD


Sep, yo siempre lo uso xD

donde? xd

Carlos: No tengo webs propias, pero hago para empresas y uso el lightbox (Carlos)

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 06 Jul 2009 00:10
por Pablo
mis felicidades Iván un tuto genial :!: :wink:

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 06 Jul 2009 00:21
por Ivan
formuloizer1.tk escribióColon¿Podrías poner algún ejemplo para poder observarlo? :D

http://loadimage.uuuq.com/lightbox/box.html

[Creado por mí]

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 06 Jul 2009 13:31
por formuloizer
Es muy interesante.

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 09 Jul 2009 20:37
por Jose93
Muy buen aporte iván. Buscaba algo parecido ;)

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 16 Jul 2009 21:18
por javierrojas
Muy intereSante, una vez lo usé pero lo quité.

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 16 Jul 2009 23:22
por CSMetalero
sisoma2 escribióColonSi, es dios ese efecto xD
A mi me encanta... xD

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 16 Jul 2009 23:27
por javierrojas
Madre mía, parece eso un milagro jajaja... :wink: :lol: :lol: :lol:

Re: Insertar un Lightbox (imagen que se agranda)

PublicadoCOLON 17 Jul 2009 23:08
por -_-Merino-_-
ES DIOS!!!!!!!!!!!1 no es un lightbox mola muchisimo eso yo lo veo en mazo de webs