Insertar un Lightbox (imagen que se agranda)

Solo para usuarios Avanzados

ModeradorCOLON Moderadores

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Insertar un Lightbox (imagen que se agranda)

Notapor Ivan » 04 Jul 2009 23:18

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.

nuestra_onda
Grand User
Grand User
MensajesCOLON 234
RegistradoCOLON 01 Ene 2009 23:59
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor nuestra_onda » 05 Jul 2009 03:27

Buen aporte, ya lo habia provado antes y esta muy bueno!!

XD
RED SOCIAL DE JUEGOS ONLINE
http://lightyearsgames.com/

Venta de Bisutería y Accesorios en México:
http://www.thepinkroom.mx

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor Ivan » 05 Jul 2009 04:17

Me agrada que te interese :)

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: Insertar un Lightbox (imagen que se agranda)

Notapor formuloizer » 05 Jul 2009 14:33

¿Podrías poner algún ejemplo para poder observarlo? :D
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Avatar de Usuario
sisoma2
Master User
Master User
MensajesCOLON 1857
RegistradoCOLON 19 Feb 2007 15:09
UbicaciónCOLON Reus-Tarragona-Catalunya-España
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor sisoma2 » 05 Jul 2009 17:46

Si, es dios ese efecto xD
A mi me encanta... xD
Imagen

Avatar de Usuario
carlitos
ExModerador
ExModerador
MensajesCOLON 1635
RegistradoCOLON 29 Nov 2006 17:02
UbicaciónCOLON Gavà M'encanta Gavà!
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor carlitos » 05 Jul 2009 20:26

sisoma2 escribióColonSi, es dios ese efecto xD
A mi me encanta... xD


Sep, yo siempre lo uso xD
Imagen
De lo que no se puede hablar.. mejor es callarse

Klk3
ExAdministrador
ExAdministrador
MensajesCOLON 2803
RegistradoCOLON 18 Nov 2005 16:09
UbicaciónCOLON Barcelona,España
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor Klk3 » 05 Jul 2009 23:17

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)
Imagen
Hasta siempre ha sido un placer muy grande :D

Avatar de Usuario
Pablo
Administrador
Administrador
MensajesCOLON 2411
RegistradoCOLON 25 Nov 2006 23:26
UbicaciónCOLON Granada
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor Pablo » 06 Jul 2009 00:10

mis felicidades Iván un tuto genial :!: :wink:

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor Ivan » 06 Jul 2009 00:21

formuloizer1.tk escribióColon¿Podrías poner algún ejemplo para poder observarlo? :D

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

[Creado por mí]

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: Insertar un Lightbox (imagen que se agranda)

Notapor formuloizer » 06 Jul 2009 13:31

Es muy interesante.
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Jose93
Grand User
Grand User
MensajesCOLON 336
RegistradoCOLON 02 Mar 2009 14:59

Re: Insertar un Lightbox (imagen que se agranda)

Notapor Jose93 » 09 Jul 2009 20:37

Muy buen aporte iván. Buscaba algo parecido ;)

Avatar de Usuario
javierrojas
Pro User
Pro User
MensajesCOLON 959
RegistradoCOLON 17 Jul 2008 23:23
UbicaciónCOLON mii casiica!!
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor javierrojas » 16 Jul 2009 21:18

Muy intereSante, una vez lo usé pero lo quité.
VUELVE WWW.PPF.YA.ST
EL MIÉRCOLES, 21 DE JULIO, A LAS 18:00 DE LA TARDE, NO FALTES, FIESTA DE REGRESO.

Avatar de Usuario
CSMetalero
Grand User
Grand User
MensajesCOLON 230
RegistradoCOLON 31 Dic 2007 01:45
UbicaciónCOLON Europeo
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor CSMetalero » 16 Jul 2009 23:22

sisoma2 escribióColonSi, es dios ese efecto xD
A mi me encanta... xD

Avatar de Usuario
javierrojas
Pro User
Pro User
MensajesCOLON 959
RegistradoCOLON 17 Jul 2008 23:23
UbicaciónCOLON mii casiica!!
CONTACTCOLON

Re: Insertar un Lightbox (imagen que se agranda)

Notapor javierrojas » 16 Jul 2009 23:27

Madre mía, parece eso un milagro jajaja... :wink: :lol: :lol: :lol:
VUELVE WWW.PPF.YA.ST
EL MIÉRCOLES, 21 DE JULIO, A LAS 18:00 DE LA TARDE, NO FALTES, FIESTA DE REGRESO.

Avatar de Usuario
-_-Merino-_-
Pro User
Pro User
MensajesCOLON 946
RegistradoCOLON 16 Mar 2007 23:10
UbicaciónCOLON Bien ubicao

Re: Insertar un Lightbox (imagen que se agranda)

Notapor -_-Merino-_- » 17 Jul 2009 23:08

ES DIOS!!!!!!!!!!!1 no es un lightbox mola muchisimo eso yo lo veo en mazo de webs


Volver a

¿Quién está conectado?

Usuarios navegando por este Foro: 1 y 0 invitados