Floatbox: nos ayuda a mostrar imágenes y vídeos

Floatbox 3.24 es la herramienta para visualizar imágenes, html y contenido multimedia (Flash, QuickTime, YouTube, Yahoo Vídeo, Google Vídeo, MSN Soapbox, Vimeo, etc) con un estilo "Lightbox" que flota encima de una página web.

Este es uno de los scripts para "ventanas modales" más versátiles y fáciles que he visto, llamando mi atención la opción de visualizar una imagen previa de un Link llamado “thumbnail”. He estado probando el script en websites y recién me anime a ponerlo en este blog.

Primero tenemos que descargar la versión 3.24
(floatbox.css, floatbox.js o el floatbox.txt )

Allí encontraremos los archivos necesarios para poner el efecto en nuestra website, para usarlo en blogger debemos subir los archivos a un servidor externo como el Fileden (creamos una cuenta, si es que no la tenemos y podemos subir los archivos).

Edición 26/05/2009: Filden no permite subir el archivo floatbox.js, así que subiremos el archivo floatbox.txt que servirá de la misma forma.

Una vez que hemos descargado y alojado los archivos, debemos poner las siguientes líneas en nuestra plantilla en (Editar plantilla HTML) justo antes de </head>:

<!-- Floatbox -->
<script type="text/javascript" src="URL_floatbox.js ó URL_floatbox.txt"></script>
<link rel="stylesheet" href="URL_floatbox.css" type="text/css" />

También podemos poner la hoja de estilos *.css directamente bajo del script:

<!-- Floatbox CSS -->
<style type='text/css'>
  ... aquí ponemos el contenido del archivo ...
</style>

Ver DEMO -blog de pruebas-

Para que funcione en Blogger subí las imágenes como (next, pause, prev, play, etc) en ImageShack, acá está listo el floatbox.css .

Edición 26/05/2009: Filden no nos permite subir el archivo floatbox.css, así que tenemos que incluirlo en la plantilla como lo indicamos al final del post ↓

El funcionamiento es de lo más sencillo, una vez guardada la modificación en la plantilla, podemos agregar las siguientes funciones (rel="floatbox", rel="floatbox.pix", rel="floatbox.group", rel="slideshow", etc) para darle los efectos que necesiten las imágenes o vídeos en nuestros posts, a continuación pondré algunos ejemplos con un código HTML


Una Imagen: Solo debemos agregar al vinculo rel="floatbox" para poder darle el siguiente efecto, como veremos dentro de la imagen puse un "info..." que nos permite describir la escena (eso lo explico acá ).
Ver código

<a href="URL_imagen" rel="floatbox" title="INFORMACIÓN"><img src="URL_imagenMiniatura" alt="" /></a>

Galería 01: Agregaremos rel="floatbox.group" en todas las imágenes, pongo dos formas con su código.

Ver código

<a href="URL_imagen01" rel="floatbox.group" title="INFORMACIÓN"><img src="URL_imagenMiniatura01" alt="" /></a> <a href="URL_imagen02" rel="floatbox.group" title="INFORMACIÓN"><img src="URL_imagenMiniatura02" alt="" /></a>...etc

Galería desde Link

<a href="URL_imagen01" rel="floatbox.group" title="INFORMACIÓN"/>Galería (Link)</a> <a href="URL_imagen02" rel="floatbox.group" title="INFORMACIÓN"></a>  <a href="URL_imagen03" rel="floatbox.group" title="INFORMACIÓN"></a>...etc

Galería 02: Agregaremos rel="floatbox.pix" en los vínculos de las imágenes, esto nos permite agregarle funciones adicionales a nuestra presentación y verlas tipo Slideshow ó poner un indice (1,2,3...) con links.

Ver código

<a href="URL_imagen01" rel="floatbox.pix" title="INFORMACIÓN"><img src="URL_imagenMiniatura01" alt="" /></a> <a href="URL_imagen02" rel="floatbox.pix" title="INFORMACIÓN"><img src="URL_imagenMiniatura02" alt="" /></a>...etc

Link de galería como Slideshow

<a href="" rel="floatbox.pix" rev="doSlideshow:true showThis:false endTask:exit navType:button">Link Slideshow</a>

Link de galería con Indice

<a href="" rel="floatbox.pix" rev="numIndexLinks:-1 showThis:false">Link</a>

Slideshow: Agregaremos rel="slideshow" en los vínculos de las imágenes.

Ver código

<a href="URL_imagen01" rel="slideshow" title="INFORMACIÓN"><img src="URL_imagenMiniatura01" alt="" /></a> <a href="URL_imagen02" rel="slideshow" title="INFORMACIÓN"><img src="URL_imagenMiniatura02" alt="" /></a>...etc

Slideshow desde Link

<a href="URL_imagen01" rel="slideshow" title="INFORMACIÓN">Slideshow (Link)</a> <a href="URL_imagen02" rel="slideshow" title="INFORMACIÓN"></a> <a href="URL_imagen03" rel="slideshow" title="INFORMACIÓN"></a>...etc

Thumbnail: Para tener una imagen previa en el link agregaremos rel="floatbox" class="fbPopup" en el vinculo de la imagen. Esto se puede aplicar de muchas formas, para enumerar o acompañar un relato como:

"Estoy harto de la publicidad que usa prototipos de modelos hombres y mujeres para vender autos" Ver código

<a rel="floatbox" class="fbPopup" href="URL_imagen" title="INFORMACIÓN">LINK<img src="URL_imagenMiniatura" alt="" /></a>

Multimedia: Ahora utilizaremos este Script para archivos Multimedia como Flash y vídeos (youtube, vimeo, yahoo video, etc) medianate una imagen o link. Solo necesitamos el URL del archivo ó video, los datos necesarios los encontraremos dentro de los <embed>...</embed> de los sites, les dejo algunos ejemplos (click en las imágenes para ver el demo).

Flash

Chess III - Flash
Ver código

<a href="URL_archivo.swf?scale=default" rel="floatbox" rev="width:90% height:85% scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

QuickTime
(Archivos *.mov, *.mpg, *.mpeg y *.movie)

Trailer: WALL-E
Ver código

<a href="URL_archivo.mov" rel="floatbox" title="INFORMACIÓN" rev="width:640 height:288 scrolling:no">IMAGEN ó LINK</a>

YouTube

Mahna Mahna - Muppets
Ver código

<a href="http://youtube.com/v/XXXXXXXXXXX&hl=en" rel="floatbox" rev="width:425 height:344 scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

Yahoo vídeo

Nina Sky - Move Ya Body
Ver código

<a href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.4&id=XXXXXXX&vid=XXXXX" rel="floatbox" rev="width:512 height:322 scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

Google vídeo

Evolution of Dance - Judson Laipply
Ver código

<a href="http://video.google.com/googleplayer.swf?docId=XXXXXXXXXXXXXXXXXXX&hl=en" rel="floatbox" rev="width:556 height:372 scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

MSN Soapbox

Gangsta's Paradise - Coolio
Ver código

<a href="http://images.soapbox.msn.com/flash/soapbox1_1.swf?c=v&amp;v=e5b86797-ddb5-490c-b759-0346a00f5ff0" rel="floatbox" rev="width:412 height:348 scrolling:no">IMAGEN ó LINK</a>

Vimeo

Circuito Mágico del Agua - Lima, Perú
Ver código

<a href="http://vimeo.com/moogaloop.swf?clip_idXXXXXXX&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&fullscreen=1" rel="floatbox" rev="width:640 height:360 scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

Blip.tv

In the jungle
Ver código

<a href="http://blip.tv/play/XXXXXXXXXX" rel="floatbox" rev="width:480 height:304 scrolling:no caption:`INFORMACIÓN`">IMAGEN ó LINK</a>

Veamos esta imagen "Limonadas a 10 ctvs".

Los sueños de crecer... imagínense que así pudieron haber comenzado los dueños de 7up
Las cosas son sencillas, solo tomamos unos limones y los partimos por la mitad, los exprimimos en agua con azúcar, les ponemos mucho hielo ¡y no olvides lo principal!... agradecer a la vida por los limones.

http://poca-tinta.blogspot.com/

25/05/2009
¡PROBLEMAS EN EL HOSPEDAJDE DE LOS SCRIPTS Y CSS!

Como todos nos hemos dado cuenta, cada vez es mas difícil encontrar un lugar donde subir nuestros los archivos de CSS y scripts, lo recomendable es ponerlos de forma directa en la plantilla de la siguiente forma:
leer más [ + / - ]

• Para el archivo *.js (Java script), en caso de no conseguir un lugar donde hospedarlo, podemos subir el mismo archivo pero en formato *.txt antes de </head>
  

  <!-- Inicio + Nombre del script -->
  <script type='text/javascript' src='URL_floatbox.txt'></script>
  <!-- Fin + Nombre del script -->



• Para el archivo de estilo *.CSS (Cascading Style Sheets), reemplazamos el lugar indicado del siguiente código, y lo podemos poner en nuestra plantilla antes de ]]></b:skin>
  
  

  /* Inicio + Nombre del CSS */
    ... aquí ponemos el contenido del archivo ...
  /* Fin Nombre del CSS */

  
  O tambien podemos ponerlo bajo el script de la siguiente forma:
  
  

  <!-- Inicio + Nombre CSS -->
  <style type='text/css'>
    ... aquí ponemos el contenido del archivo ...
  </style>
  <!-- Fin + Nombre CSS -->

Menciono el tema del nombre del archivo para que sepan que agregan a su plantilla y de esa manera modificarla en cualquier momento, es un poco tediosa esta forma; pero nuestros amigos de Blogger nos ponen limitaciones y nos toca adaptados.

Pueden ver el contenido del archivo floatbox.css texto css.