Facebox es una ventana modal (lightwindow) ligera que puede mostrar imagenes, divs (capas) o paginas enteras a traves de ajax. Utiliza la libreria jQuery por lo que si utilizamos Scriptaculous o prototype podria presentarnos problemas con los efectos.
Tiene una apariencia parecida al visualizador de facebook, de ahi su nombre.
Podemos ver algunos ejemplos en funcionamiento en esta pagina.
Para agregar la laightwindow descargamos el zip y alojamos los archivos en nuestro servidor, si no quieres meterte en ese cuento o de verdad no sabes como, puedes usar mis archivos (en caso de cambiar de servidor publicaré una entrada con los nuevos links):
Lista de archivos.
Lo siguiente será adjuntar la hoja de estilos y los archivos js (ambos antes de </head>):
<link href="url-facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="url-facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
y los archivos los añadimos de la siguiente forma:
Para una imagen :
Para una capa (div) esccondida:
<div id="mydiv" style="display:none">
El contenido de esta capa solo sera visible si presionamos click sobre el enlace anterior, que contiene el id mydiv
</div>
Un archivo html externo (solo si esta en el mismo servidor):
y para añadir un html externo(como el anterior) dando estilos css:
.estilo{
background: silver;
}
</style>
24 comentarios
Miguel tantos días sin verte :D...queda bellísimo pero ya tengo Scriptaculous no son compatibles.
Buena suerte con los estudios!!!
Posted on 8/10/2009 3:52 a. m.
Graciela!!! tanto tiempo sin venir jaja(no es cierto :) )
Sii es una pena que tengan problema esas dos librerias, yo tambien uso scriptaculous.
Gracias por tu visita.
Posted on 8/10/2009 7:36 a. m.
me pasaría el día entero mirando los blogs de diseño, plantillas...no tengo tiempo, mi día tiene que ser de 48 horas, desde siempre ha sido así :D
Posted on 8/11/2009 4:45 a. m.
jaja, siii el tiempo es el unico limite |O
Tambien me gusta mucho el diseño...en mis favoritos de firefox tengo montones de paginas para inspiracion, tal vez alguna vez los postee :)
Posted on 8/11/2009 7:13 a. m.
Hola amigo, espero que estes bien. Sabes que no entiendo nada jaja y me gustaria hacer eso con las capturas en mi blog, así no ocupo tanto espacio, solo para ver cómo queda, pero no entiendo muy bien. :$
:P haber si te pillo conectado. BAY
Posted on 8/11/2009 9:06 a. m.
No es para nada dificil, aunque si prefieres te explico mejor por messenger :)
gracias por tu comentario.
Posted on 8/11/2009 12:19 p. m.
:O :o
Posted on 10/20/2009 10:54 a. m.
¿Has probado esta modal para incluir vídeos Miguel?
Posted on 12/26/2009 4:25 p. m.
De hecho no lo habia probado, pero es una buena observación ya que esta ventana es muy liviana.
Acabo de hacerlo con videos de youtube y de blip.tv y si es posible; puedes ver un ejemplo funcionando en ésta página (acabo de actualizar el ejemplo anterior).
Posted on 12/26/2009 5:29 p. m.
No veo el vídeo Miguel :(
Estuve intentando de añadir la imagen close y de carga pero lo voy a dejar para mañana ya es muy tarde, aunque no sé si voy a poder dormir sin probar el efecto jajajaja
Posted on 12/26/2009 5:40 p. m.
Que raro :(
lo probé en Google Chrome (4.0.249.25), Internet explorer (8) y Firefox (3.5.6) y me funciona bien.
Posted on 12/26/2009 5:43 p. m.
¿En qué enlace está Miguel? ¿qué texto tiene?
Posted on 12/26/2009 5:55 p. m.
Dice video (hay 3), pero puedes verlo en esta página individual, lo unico que hay son dos enlaces que dicen:
video (iframe) y video (embed)
Posted on 12/26/2009 6:40 p. m.
Ahora siiiiii en el otro enlace no se veía.
Está genial, con Lytebox también se ve los vídeos aunque no está creado para eso pero en la página principal nada más.
Yo utilizo iBox para los vídeos van genial porque es muy rápido pero está bien esta modal cuand ose usa jQuery.
Gracias por todo Miguel :)
Posted on 12/26/2009 7:02 p. m.
No hay de que Gem@, creo que cuando me anime cambiaré scriptaculous por jquery; ultimamente he visto muchos plugins interesantes.
Si el enlace individual te ha servido, creo que el problema está en la información guardada por tu navegador, así que no estaría de más un ctrl+f5 para ver si funciona :)
Posted on 12/26/2009 7:45 p. m.
No salió el comentario :(
Decía que los plugins también requieren actualizaciones, es según las necesidad de cada uno para el blog.
Posted on 12/27/2009 3:06 p. m.
Hola! Estoy usando Facebox pero no funciona en ningun Internet Explorer... sabrais porque???
Posted on 3/06/2010 6:03 a. m.
Hola Mario, suele pasar que uses algun otro script que no funcione junto a este. El hecho de que solo no funcione en internet explorer se debe a incompatibilidad con los navegadores, prueba apartando el script en una pagina aparte para ver si es algun choque con otra libreria.
Posted on 3/06/2010 9:07 p. m.
Hola ya he logrado implementar el facebox en mi proyecto. Gracias Miguel
Ahora me gustaria saber si conoces de algun plug-in o alguna tecnologia para lograr algo como lo de esta pagina:
http://www.netlobo.com/div_hiding.html
Cuando pasas el cursos sobre los links de la pagina que tienen doble subrayado como son CSS e Internet Explorer.
Me gustaria hacer algo similar para mi pagina, que al pasar el cursor sobre determinado elemento aparesca un cuadro de dialogo similar a ese en el cual yo pueda enviar informacion e incluso redireccionar a otra pagina.
Gracias por tu ayuda
Posted on 7/21/2010 2:31 p. m.
Hola Angel, pasate por este post, hay por lo menos 40 maneras de hacer lo que dices.
Posted on 7/21/2010 2:37 p. m.
Ok dare un vistazo, muchas gracias.
Posted on 7/21/2010 3:13 p. m.
Hola amigos, quisiera saber si se puede hacer un efecto de opacidad al fondo para que paresca negro, y se siga viendo la ventana.
Gracias (:
Posted on 1/12/2011 10:05 p. m.
aqui tienes una nueva version de facebox que ya tiene el overlay (efecto opacidad). y aqui tienes como crear tu propio overlay.
Posted on 1/12/2011 10:09 p. m.
Hoy en día, si uno no tiene su sitio conectado a las redes sociales, queda en inferioridad de condiciones a la hora de competir. El boton del Like y todos los demás complementos de facebook tiene que estar si o si. Gracias por compartir la nota tecnica. A ver como me las arreglo para implementarlo.
Posted on 6/05/2011 8:50 a. m.
Publicar un comentario en la entrada al viejo estilo