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
Loading ...
rodrigo
16-01-2008
Permalink
es nesesario de que el directorio FACEBOX se encuentre en el servidor (raiz) no puede estar en una carpeta Script... dentro del mismo sitio web..
saludos..
Nikko
16-01-2008
Permalink
rodrigo : si se puede hacer lo que dices, es solo una forma de expresión la que utilizo ....para que sepan aquellos q no saben q deben alojarlo primero en su "Servidor". Pero puedes alojarlo en una carpeta sin problema, y escribir bien la nueva ruta al script.
Yo por ej, Suelo tener todos mis script en una carpeta llamada "js" ...
Saludos
Jatux
16-01-2008
Permalink
Yo también tengo una estructura de caretas ("js"), dentro de mi repositorio web, para alojar todos los scrips que utilizo, de la misma forma mantengo también la misma estructura para los "css" y para las imágenes. Siempre debo de modificar los css y js con referencias "base" a la nueva ubicación, hasta aquí todo me ha funcionado siempre.
Con facebox no he logrado que muestre un div, con su id, "oculto" en una página que no sea la raiz (http://www.miweb.com):
Texto de prueba
Bla Bla Bla
Sólo funciona si coloco el código html que acabo de detallar en la página raiz del sitio web. He probado de todo y no lo he logrado.
Creo que el quick de la cuestión está aquí:
*** Fichero: facebox.js ***
[...]
// div
if (this.href.match(/#/)) {
var url = window.location.href.split('#')[0]
var target = this.href.replace(url,'')
$.facebox.reveal($(target).clone().show(), klass)
[...]
aunque no las tengo todas conmigo, porque modificando las variables url y target a valores que contemplen la url activa, difente a la raiz, no consigo que muestre el popup con el div en cuestión.
SatiricK
16-01-2008
Permalink
Que tal, me gustaria saber si conoces algun codigo ke abra un lightbox (que soporte flash) al cargar una página, como era antes el clasico popup de publicidad, pero en lightbox e buscado y preguntado en foros de los mismos creadores de los scripts pero nadie habla
motionmentur
16-01-2008
Permalink
hola por favor alguien que me explique el codigo para el ligthview para el iframe con las imagenes me resuta bien pero cuando quiero integrar el archivo html no me funciona porque sera no entiendo he dado mas vueltas y nada se los agradeceria
hector2c
16-01-2008
Permalink
en mi caso, suelo ordenar en la raiz una carpeta llamada extras, donde agrego carpetas como ico, img, js, inc, css...
dentro de js incluyo jquery.facebox...