Facebox 1.0 un nuevo script basado jQuery que nos permitirá realizar agradables Lightbox. Los efectos de estos Lightbox es como solemos conocerlos, solo puede variar un poco en cuanto a diseño, pero los Lightbox siguen siendo Lightbox y los resultados siempre los imaginados. Aunque Facebox 1.0 nos permite resaltar algunos puntos interesantes o diferentes con respecto a otros, ya que puede ser implementado o utilizado en imágenes desde una sección o mediante la URL a una imagen en si. Pero algo que me ha agradado de Facebox es que nos permite capturar DIV que se encuentren en nuestra web, y mostrar el contenido de ese DIV en forma Lightbox.
Ver Demo - Descarga demo - Web Facebox 1.0 - Via informatica-practica
Uso
Descargamos el script Facebox 1.0 y jquery. Descomprimimos cada uno de los archivos y los alojaremos en nuestro servidor, posteriormente realizaremos la llamada a cada uno de ellos, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
Implementar estos Lightbox en nuestro contenido es realmente sencillo, simplemente lo haremos usando el atributo rel=" facebox " donde deseemos dar los efectos.
Por ejemplo si deseamos que en una imagen cuando hagan click sobre ella se produzca efecto Lightbox, lo haremos de este modo.
Si lo deseamos hacer solo utilizando una url hacia una imagen.
Y por ultimo: Si deseamos crear una especie de galería, introduciremos un poco de CSS, y luego la estructura
list-style: none;
display: inline;
}
li {
padding: 2px 5px;
}
#capturas a {
border: none;
}
#capturas img {
padding: 3px;
border: 1px solid #ddd;
background: #000;
}
La estructura: (que podran ver en el demo)
<li><a href="Foto_grande.jpg" rel="facebox"><img src="Foto_Miniatura1.jpg"></a></li>
<li><a href="Foto_grande.jpg" rel="facebox"><img src="Foto_Miniatura2.jpg"></a></li>
<li><a href="Foto_grande.jpg" rel="facebox"><img src="Foto_Miniatura3.jpg"></a></li>
<li><a href="Foto_grande.jpg" rel="facebox"><img src="Foto_Miniatura4.jpg"></a></li>
</ul>
Lightview script esta vez basado en prototype, pero que al igual que facebox nos permitirá lograr Lightbox muy bonitos, a los cuales podremos agregarle un titulo y una descripción a mostrar, todo esto utilizando el atributo “Title”. Lightview a su vez nos permite agregar Lightbox a fotos individuales o bien agrupando estas imágenes en set, lo que nos permitirá luego realizar una navegación sobre cada una de ellas desde el mismo Lightbox.
Ver demo - Descarga Ejemplo - web Lightview - via diariothc
Uso
Descargamos el script Lightview junto con prototype y scriptaculous. Alojaremos cada uno de ellos en nuestro host, posteriormente realizaremos la llamada correspondiente, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.
<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/lightview.js'></script>
Utilizarlo en nuestro blog: Lo haremos usando el atributo rel=" lightview ". También en el atributo "title" podremos agregar el titulo de la imagen junto a una breve descripción que ira luego de los dos puntos.
Ejemplo Utilizado en imagen individual
Para agrupar imágenes que luego podremos visualizar mediante el sistema de navegación que nos ofrece el mismo lightbox usaremos ' lightview[setname] '
Ejemplo
<a href='Imagen_grande2.jpg' rel='lightview[myset]'><img src="Miniatura2.jpg"><a/>
<a href='Imagen_grande3.jpg' rel='lightview[myset]'><img src="Miniatura3.jpg"><a/>
......etc
2 Comentarios por usuarios
gracias por los recursos,
Excelente gracias !!