Bumpbox

Probando en este blog de pruebas la Bumpbox de ArtViper

Es rápida, limpia, puede "leer" imagen, vídeo, flash... completa, completa... es de las lightboxes que más me han gustado hasta ahora ... pero me ha costado un congo entender cómo funcionaba en blogger el "pathIcons" del archivo js, uuuuuufffffffff ...

¡Ah!: Y usa Mootools. :)

-------------------------------------------



Vale: explico ...

Para bajar la documentación, scripts y demás, al final de la página de ArtViper que he colocado arriba de esta entrada, tenéis el enlace de descarga: cuando pincháis en "download", se os dirige a otra página, en la que se os pide vuestra dirección de e-mail y que marquéis el hack que os interesa descargar. Una vez hecho ésto, ya podeis abrir vuestro ZIP y comenzar a trabajar para implementar vuestra bumpbox.

Bumpbox puede ser muy compleja o muy simple, dependiendo de para qué querais utilizarla: soporta imágenes, swf, PDF, MP3, HTML ... y es la lightbox más rápida que conozco hasta ahora.


De momento, yo sólo la he probado con imágenes ... y también la utilizo para abrir la ventana de comentarios :)

Recordad, como todas las lightbox, que a la hora de implementarla, tenéis que darle un nombre a la clase (yo tengo uno para la galería de imágenes que he colocado de prueba y otro para la ventana de comentarios).

El Css es muy importante, para variar, pero ... ¡¡OJO!!: a la hora de colocar las imágenes de cierre, adelante, atrás, fondo y demás de la bumpbox, es necesario que abráis el script "bumpbox.js", porque en su interior es dónde tendreis que colocar todo ello. Con el Zip vienen un pack de iconos que podéis usar. Pero si queréis usar vuestros propios iconos, aseguráos de que el pack esté dentro de la misma carpeta en que tenéis la bumpbox.

Colocad el CSS dentro de la hoja de estilos de vuestro blog y los scripts antes del cierre head de la plantilla. en cuanto al HTML, nada más fácil: coloca la imagen, el "rel" con el tamaño de la caja y la clase. Podéis introducir también un título (que aparecerá debajo de la caja, en el margen inferior izquierdo):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://.../s1600/falla1.jpg" class="bump" rel="800-600"title="falla1"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 218px;" src="http://2.bp.blogspot.com/.../s320/falla1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_..." /></a>

Y creo que eso es todo ... lo cierto es que tiene tantas posibilides que creo que no terminaría de explicarlas en la vida (el nombre para dar a la clase, el efecto de velocidad de la caja, color, opacidad, radio de los bordes, transiciones ... )