Así como VideoBox es una librería que permite mostrar videos, SlimBox es un script que permite hacer lo mismo pero con las imágenes.
Para utilizarla necesitamos los siguientes archivos:
slimbox.js y slimbox.css son el script y la hoja de estilo
closelabel.gif, loading.gif, nextlabel.gif y prevlabel.gif son las imágenes utilizadas
mootools.js es la librería que general de funciones
Para disponer de esta función debemos subir los archivos a un servidor y luego, incluirlos en nuestra plantilla, agregando lo siguiente, justo antes de </head>:
Para utilizarla necesitamos los siguientes archivos:
slimbox.js y slimbox.css son el script y la hoja de estilo
closelabel.gif, loading.gif, nextlabel.gif y prevlabel.gif son las imágenes utilizadas
mootools.js es la librería que general de funciones
Para disponer de esta función debemos subir los archivos a un servidor y luego, incluirlos en nuestra plantilla, agregando lo siguiente, justo antes de </head>:
<script type="text/javascript" src="URL_mootools.js"></script> <script type="text/javascript" src="URL_slimbox.js"></script> <link rel="stylesheet" href="URL_slimbox.css" type="text/css" media="screen" />
Hay que tener en cuenta que la librería mootools tiene diferentes versiones y puede ser descargada individualmente con diferentes características, en este caso, se trata de la versión 1.1 completa y puede usarse tanto para este script como para el de VideoBox. Lo mismo ocurre con las imágenes y la hoja de estilo (son los mismas en ambos scripts).
Para utilizarlo debemos agregar el atributo rel="vidbox" al enlace:
Para utilizarlo debemos agregar el atributo rel="vidbox" al enlace:
<a rel="lightbox" href="URL_archivo" title="un_texto"> EL ENLACE </a>
donde:
URL_archivo es la dirección del archivo de la imagen a mostrar y un_texto es el texto optativo que se mostrará en la ventana.
El enlace puede ser tanto un texto como una imagen.
También podemos crear grupos de imágenes y, en ese caso, bastará abrir sólo una de ellas para poder navegar por las otras. Para esto, sólo debemos agregarles un nombre entre corchetes, justo después del atributo lightbox:
URL_archivo es la dirección del archivo de la imagen a mostrar y un_texto es el texto optativo que se mostrará en la ventana.
El enlace puede ser tanto un texto como una imagen.
También podemos crear grupos de imágenes y, en ese caso, bastará abrir sólo una de ellas para poder navegar por las otras. Para esto, sólo debemos agregarles un nombre entre corchetes, justo después del atributo lightbox:
<a href="URL_imagen1" rel="lightbox[nombregrupo]">IMAGEN 1</a> <a href="URL_imagen2" rel="lightbox[nombregrupo]">IMAGEN 2</a> <a href="URL_imagen3" rel="lightbox[nombregrupo]">IMAGEN 3</a>
También pueden mostrarse las imágenes utilizando JavaScript de la siguiente manera:
Lightbox.show("URL_archivo","un_texto");En el script podemos personalizar algunos parámetros:
resizeDuration es la duración de la animación de apertura y cierre expresada en milisegundos
resizeTransition el tipo de transición a utilizar y puede usarse cualquiera de las contenidas en la librería mootools
resizeDuration es la duración de la transición
initialWidth el ancho inicial de la ventana en pixeles
initialHeight el alto inicial de la ventana en pixeles
animateCaption false para deshabilitar la animación de los textos
displayCounter false para deshabilitar el contador (Image X of X)
resizeDuration es la duración de la animación de apertura y cierre expresada en milisegundos
resizeTransition el tipo de transición a utilizar y puede usarse cualquiera de las contenidas en la librería mootools
resizeDuration es la duración de la transición
initialWidth el ancho inicial de la ventana en pixeles
initialHeight el alto inicial de la ventana en pixeles
animateCaption false para deshabilitar la animación de los textos
displayCounter false para deshabilitar el contador (Image X of X)
8 comentarios:
Me encanta probar todo esto aunque luego no le de utilidad ¿Creará adicción?
Sí, claro ... ¿se nota mucho? :D
He probado este script (slimbox) pero presenta el mismo problema de VideoBoX osea presmeta problemas en el internet explorer.
Paseando por la Red me encontre con esta página (http://www.ton3.net/?page_id=25) la cual tiene una galería de imágenes como slimbox pero esta no presenta problemas en el Intenet Explorer que extraño a que creas q se deba Jmiur. O acaso soy el equivocado y el script (slimbox) si resulta.?
El problema de Slimbox y el de VideoBox es el mismo porque ambos utilizan mootols y al parecer, el problema está allí.
En estos días he visto decenas de foros con problemas similares y ninguna respuesta concreta. Parecía interesante, de hecho lo es pero se hace muy difícil de manejar y los resultados son aleatorios, a veces todo está bien y a veces no.
El enlace que colocas utiliza otra framework: prototype + scriptaculous+ lightbox. Veremos si esa resulta más sencilla de implementar en Blogger.
Cuáles son los problemas de SlimBox? Es mejor SlimBox o Lytebox?? Ayudaaa! jeje Gracias.
JuanCarlos 3941
SlimBox utiliza la librería Mootools que es bastante menos pesada pero siempre he tenido problemas para integrarla en Blogger.
No es que haya una mejor y una peor sino, cuestión de gustos y de lograr que se adapte a nuestras necesidades sin conflictos.
El slimbox tiene opcion de mostrar formularios? de que manera y gracias d antemano
No lo he probado pero, se me ocurre que si permite contenido inline, cualquier tipo de código HTML es aceptable.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...