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]

  <a href="URL_pagina" rel="floatbox">ENLACE</a>

• un archivo SWF CLICK [ver código]

  <a href="URL_archivo.swf?wmode=window" rev="width:ancho height:alto scrolling:no"  rel="floatbox">ENLACE</a>

• un video de YouTube CLICK [ver código]

  <a href="http://youtube.com/v/IDVIDEO" rel="floatbox" rev="width:425 height:350 scrolling:no">ENLACE</a>

• un video de Google Videos CLICK [ver código]

  <a href="http://video.google.com/googleplayer.swf?docId=IDVIDEO" rel="floatbox" rev="width:400 height:326 scrolling:no">ENLACE</a>

• un video de Vimeo CLICK [ver código]

  <a href="http://vimeo.com/moogaloop.swf?clip_id=IDVIDEO" rel="floatbox" rev="width:640 height:360 scrolling:no">ENLACE</a>

• un video de Dailymotion CLICK [ver código]

  <a href="http://www.dailymotion.com/swf/IDVIDEO" rel="floatbox" rev="width:420 height:339 scrolling:no">ENLACE</a>

• un video de blip.tv CLICK [ver código]

  <a href="http://blip.tv/play/IDVIDEO" rel="floatbox" rev="width:480 height:304 scrolling:no">ENLACE</a>

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