FloatBox: Nueva ventana modal de usos múltiples

Floatbox es otra de esas ventanas modales similares a LightWindow pero que tiene algunas características importantes que la diferencian. La principal es que no requiere librerías extras por lo que termina siendo muy liviana y funciona sin limitaciones.

Permite mostrar imágenes individuales, galerías, slidshows, páginas externas, archivo de Flash, archivos de Quicktime y videos de casi todos los servicios existentes (YouTube, Google Videos, Vimeo, Dailymotion, etc.). El script tiene muchas opciones para configurarlo, botones para redimensionar las ventanas e imprimir su contenido; también puede agregarse información extra que también se muestra dentro de otra ventana modal,

Podemos descargarla en formato ZIP y allí encontraremos los dos archivos necesarios: floatbox.js y floatbox.css.

En Blogger, el CSS podemos agregarlo directamente en la plantilla entre etiquetas STYLE antes de </head>:
<style type='text/css'>
... aquí pegamos el contenido del archivo ...
</style>
O bien alojarlo en un archivo externo y cargarlo con LINK.

Debajo, agregaremos el script al que no le veo otra posibilidad que cargarlo desde un archivo externo (con extensión JS o TXT):
<script type="text/javascript" src="URL_floatbox.js"></script>
Para simplificar las cosas , este otro ZIP contiene los archivos ya traducidos al español y las imágenes alojadas.

Para utilizarlo, basta agregar el parámetro rel="floatbox" a un enlace. Por ejemplo:
<a rel="floatbox" href="URL_imagen">TEXTO o IMAGEN</a>
Click para ver un ejemplo con una imagen simple

Para crear una galerías de imágenes usamos rel="floatbox.group". Por ejemplo:
<a href="URL_imagen1" rel="floatbox.group">1</a> | <a href="URL_imagen2" rel="floatbox.group">2</a> | <a href="URL_imagen3" rel="floatbox.group">3</a>
o bien:
<a href="URL_imagen1" rel="floatbox.group">TEXTO o IMAGEN</a><a href="URL_imagen2" rel="floatbox.group"> </a><a href="URL_imagen3" rel="floatbox.group"> </a>
GALERIA MODELO 1 -->1 | 2 | 3
GALERIA MODELO 2 -->CLICK

Con un esquema similar, podemos crear un slideshow automático, usando el parámetro rel="slideshow":
<a href="URL_imagen1" rel="slideshow">TEXTO o IMAGEN</a><a href="URL_imagen2" rel="slideshow"> </a><a href="URL_imagen3" rel="slideshow"> </a>
EJEMPLO DE SLIDESHOW -->CLICK

Otros ejemplos:
  • una página externa CLICK [ver código]
  • un archivo SWF CLICK [ver código]
  • un video de YouTube CLICK [ver código]
  • un video de Google Videos CLICK [ver código]
  • un video de Vimeo CLICK [ver código]
  • un video de Dailymotion CLICK [ver código]
  • un video de blip.tv CLICK [ver código]

Una de las opciones más interesantes es la posibilidad de usar miniaturas en los enlaces de texto como este o este otro. Al poner el cursor encima del enlace, veremos una miniatura y al hacer click, veremos la imagen original.

Para eso, debemos agregar dos parámetros rel="floatbox" y class="fbPopup":
<a rel="floatbox" class="fbPopup" href="URL_imagenOriginal">ENLACE DE TEXTO<img src="URL_imagenMiniatura"/></a>
Hay muchas más alternativas y configuraciones. En la página de demos pueden verse algunas de ellas. La información es bastante completa, el sitio tiene una página con descripción detallada y un foro de soporte.

REFERENCIAS:Poca Tinta

1 comentarios:

Prof. Cesar S. dijo...

amigo gracias por aportar tan valiosa informacion, lamentablemente no se puede descargar los archivos, sera posible resubirlos?? y por favor avisar gracias

Publicar un comentario