Bubble
Bubble es una librería JavaScript que permite mostrar "bocadillos" con una imagen al interior. El "bocadillo" se adapta al tamaño de la imagen y se puede cambiar su aspecto mediante css.
El código está inspirado de Lightbox JS de Lokesh Dhakar.
Ejemplo
Para ver Bubble en acción, pasa el puntero del ratón por encima de los iconos con un "bocadillo".
Como se usa
Bubble utiliza la librería Prototype.
Añadir estas líneas a la cabecera de la página:
<link href="styles/bubble.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/bubble.js"></script>
A continuación añadir una línea similar a esta en cada lugar que se quiera mostrar un "bocadillo". Para que el script se active, no hay que olvidar el rel="bubble".
<a href="imagenes/scriptaculous.jpg" rel="bubble"><img src="imagenes/bubble.png"/></a>
FAQ
¿Puedo cambiar el aspecto del "bocadillo"?
Se puede cambiar el aspecto modificando el fichero bubble.css. Si las imágenes que forman el "bocadillo" no tuviesen el mismo tamaño que las originales se necesitará modificar algunos valores de configuración dentro del fichero bubble.js. Estos valores son:
- La distancia en píxeles del borde a la punta del "bocadillo"
- El margen derecho e izquierdo en píxeles de la imagen respecto a los bordes del "bocadillo"
- El grosor en píxeles del borde de la imagen
Estos valores encuentran definidos el inicio del fichero bubble.js.
¿Sobre que código HTML se aplica el fichero bubble.css?
El código JavaScript añade dinámicamente las siguientes líneas al HTML:
<div id="bubble">
<div class="Article">
<div class="ArticleHeader" id="ArticleHeader"></div>
<div class="ArticleBody" id="ArticleBody"></div>
<div class="ArticleFooter" id="ArticleFooter">
<div class="ArticleFooterBottomRight"></div>
</div>
<div class="ArticleFooterTail" id="ArticleFooterTail"></div>
</div>
</div>
La imagen va dentro del tag ArticleBody.
¿Puedo usar Bubble en un proyecto comercial?
Si. La licencia es del tipo Creative Commons Reconocimiento 2.5. Básicamente, se puede copiar, distribuir y comunicar públicamente la obra; hacer obras derivadas; hacer un uso comercial de esta obra. En el caso de hacer obras derivadas, se debe distribuir bajo otro nombre.
Contacto
Para notificar cualquier bug o hacer cualquier pregunta envía un email a info@albertlanchas.com.
Igualmente agradecería que se me enviase la dirección de la página en la que se utiliza Bubble.
