Una “intro” a BumpBox…

La idea de este post es mostrar como usar BumpBox (http://www.artviper.net/website-tools/bumpbox-lightbox.php) en los sitios web en desarrollo.

Esta herramienta hace que la presentación de PDF, imágenes, videos se haga diferente, atractiva, de manera que se salga de las formas comunes de presentación.

No es la única herramienta que hace este tipo de transiciones y efectos… sin embargo es una de las que hace presentación de una amplia variedad de recursos., sin tanto rollo comencemos con la creación del ejercicio.

Entendamos la parte conceptual:

  • Lo que se va mostrar en la ventana emergente que crea BumpBox es el valor de href del enlace que hace referencia a la herramienta.

Como ejemplo mostraré el contenido de una página y además un documento PDF, el HTML quedaría así:

<a href=”navegar.pdf”>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx”><img src=”images/imagen.jpg” /></a>

y para que estos enlaces se reconozcan por la herramienta den incorporar el atributo class, además debemos especificar el tamaño de la ventana emergente en el atributo rel con el formato ancho-alto.

<a href=”navegar.pdf” class=”elemento” rel=”800-600″>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx” class=”elemento” rel=”800-600″><img src=”images/inna1.jpg” /></a>

Ahora hay que hacer referencia a los recursos JS necesarios.

<script type=”text/javascript” src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/bumpbox-2.0.1.js”></script>

Justo como lo vemos en las referencias, BumpBox se acompaña de MooTools para funcionar, aunque esto es transparente ya que no tendemos que entrar a detalle.

Por ultimo, necesitamos invocar la función que creará la interacción y dejará los enlaces listos para que al dar clic se muestren dentro de las ventana emergentes los contenidos correspondientes, la función es: doBump( )

La mínima declaración es: doBump( ‘.elemento’);

Aquí se indica que los elementos que transformará son los que usan la clase elemento de CSS, los enlaces que no necesiten ser transformados por BumpBox pueden no llevar la clase o tener otra clase declarada y no son tomadas en cuenta.

La llamada se puede hacer al final de la página mediante la llamada a la función o en el evento onload de body, ambos tendrán el mismo resultado.

La función doBump además de la clase tiene una colección extensa de parámetros, la siguiente tabla lo resume:

name Nombre de la clase de CSS de los elementos que queremos que se afectan por BumpBox
inSpeed Tiempo de transición para mostrar la ventana en milisegundos
outSpeed Tiempo de transición para cerrar la ventana en milisegundos
boxColor Color de bumpbox sin el #
backColor Color del fondo, omitir #
bgOpacity Valor de la opacidad del contorno de la ventana emergente.
bRadius Especificar el redondeo de la ventana
borderWeight Especificar el grosor del borde de la ventana
borderColor Color del borde de la ventana emergente, omitir #
boxShadowSize Tamaño de la sombra en pixeles
boxShadowColor Color de la sombra de la ventana
iconSet Especificar entre 1 y 4 el conjunto de iconos que se utilizarán en la ventana
effectsIn El efecto de transición usada para mostrar la ventana
effectsOut El efecto de la transición usada para ocultar la ventana
bgImage Imagen que puede ser usada de fondo
bgPosition Posición del fondo
bgRepeat Tipo de repetición del fondo

Para tener más información sobre los efectos de transición consultar la referencia de transiciones Fx de MooTools

http://mootools.net/docs/core/Fx/Fx.Transitions#Fx-Transitions

De esta manera una llamada a la función doBump puede quedar así:

<body onload=”doBump( ‘.emergente’,1000, 4000, ‘111’, ‘900’, ‘0.8’, 5, 1 ,’333′, 15,’000′, 2, Fx.Transitions.Bounce.EaseOut, Fx.Transitions.Bounce.EaseOut );”>

Listo, es lo mínimo necesario para usar BumpBox en nuestro sitio web, ya sea un desarrollo propio o un manejador de contenido.

Nos vemos la próxima

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.