Bubble

in javascript css tooltip published the 12 de October de 2006

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.

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="/img/scriptaculous.jpg" rel="bubble"><img src="/img/bubble.png"/></a>
Descargar

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.


1 comentario

  • oscar

    12 de August de 2010

    Se puede utilizar este componente para mostrar texto, o una previsualización de otra página web?... gracias

Thinking of hiring my services?

Read this

Some notes you might find useful:

  • I'm a web programmer and although I would love to design, it doesn't fall within my competences. To be able to develop a website I need the final graphic design. If you don' know a designer I can recommend you any I have worked with and I though their work was good.
  • I'm not a SEO specialist, although I use basic rules and common sense when structuring content which translates in a better ranking.
  • If possible, send me all the information you think I might need to give you a quote. “To program a website like this one” isn't enough, I won't be able to evaluate its cost as I won't know its functionalities. I need you to specify them.
  • Depending on the scope of the project, I might ask you your budget.
  • Tell me if you have a deadline. Depending on my availability I'll tell you if it's a job I can do or not.

To contact me you can use the contact form.