jQuery plugin: fontSizer

Un nuevo plugin para el grandioso jQuery ha nacido. Por un proyecto en el cual estoy involucrado, era necesario un método parametrizable para manejar aumento/disminución del tamaño de fuentes. Busqué mucho un plugin para esto, y me frustré bastante dado la carencia del ideal, así que gracias a la habilidad del web developer Rodrigo Augosto, surge este nuevo aporte a la accesibilidad web.

Ver ejemplo

Modo de Uso

  1. Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
  2. Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
  3. Inicializar el plugin, como en el ejemplo:
$(document).ready(function(){
    $("#aumentar").fontSizer({
       action: "up"
    });
    $("#disminuir").fontSizer({
       action: "down",
    });
});

Eso es. El único parámetro obligatorio es indicar la acción de cada link mediante action. Los parámetros son:

  • action: "up/down" (requerido).
  • elements: "elemento" (un id, class o etiqueta donde actuará el cambio de tamaño de fuente).
  • increment: número (en cuántos pasos serán el cambio de tamaño; por defecto es de 1 en 1).
  • max: número (tamaño máximo del tamaño de fuente; por defecto es 30px).
  • min: número (tamaño mínimo del tamaño de fuente; por defecto es 8px).

Por ahora solo ha sido probado con jQuery 1.2.6, pero no debería de tener problemas con versiones desde 1.2+

Descargar (.zip)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Otro más para matar IE6

No bastan los hacks, los comentarios condicionales, reseters, advertencias… Internet Explorer 6 sigue dándonos muchos problemas. Pero les traigo una excelente solución ya que es tan invasiva, tan pero taaaaan invasiva que toma por completo control de IE6 y hace q se comporte como se debe. Google Chrome Frame es un plugin open source que [...]

Íconos para mejor usabilidad

Relativo a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links que sean relativos a descargas de diferentes tipos de documentos, a links externos (target="_blank"), a direcciones de e-mail ("mailto:") y a links de impresión ("window.print"). Como surgió la [...]

Psicología Cognitiva

Entender nuestros actuales usuarios -y los potenciales que pretendemos tener- es básico para una buena planificación de un proyecto web. Ir más alla, conocer cómo se comporta la mente de una persona ante el diseño y funcionamiento del sitio web es importante para el éxito de ese proyecto. La psicología cognitiva hace precisamente eso: estudia [...]

  1. Muy buen trabajo, muy buen plugin, sólo le agregaría una cosa, la posibilidad de resetear la fuente a su tamaño original, ya que después de varios clicks en aumentar se pierde la cuenta de cuanto lo aumentamos y para regresar al tamaño original se puede dificultar.

    Todo lo demás perfecto, un saludo

    Carlos Leopoldo
    08 / Agosto / 2008

  2. Muchas gracias Carlos Leopoldo, muy buena tu sugerencia, dalo por seguro que la implementaré.
    Aprovecho de dar las gracias a Jorge por publicar mi plugin para compartirlo y pedir disculpas por mi aun pésimo sitio. (Casa de herrero, cuchillo de palo)

    Rodrigo Augosto
    08 / Agosto / 2008

  3. Muy bueno, y facil de usar, si concuerdo con Carlos :D

    fearlex
    15 / Agosto / 2008

  4. Se podría resolver temporalmente en los parámetros max: 14, min: 8, colocando como minimo el tamaño de la fuente en ese momento, esto es para evitar q se reduzca mas del tamaño que tiene definido, yo lo resolvi así. Excelente plug-in, Saludos…

    Jose Miguel
    17 / Marzo / 2010

  5. El jquery.fontSizer.js falla cuando usamos en pantalla el api de Gmaps:
    Error: $(“#aumentar”).fontSizer is not a function

    Nuevo
    08 / Junio / 2010

  6. Situándo la carga de la librería jquery.fontSizer.js después de gmaps.js funciona perfectamente.

    Nuevo
    08 / Junio / 2010

  7. Muy bueno, aunque me he liado un poco implementándolo :P

    Probado con jQuery 1.2.5 funciona perfectamente.

    Nacho
    19 / Mayo / 2011

  1. [...] web, y el usarlo en tu sitio web o blog es muy sencillo, solamente debes de descargar el plugin ...
    Aumenta el tamaño de la fuente con jQuery
  2. [...] Flipv (Demo – Descarga) 2. FontEffect (Demo – Descarga) 3. FontSizer (Demo – Descarga) 4. Scrabble Text (Demo – ...
    JQuery: Una de plugins para efectos de texto | Jugando entre diseñadores

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 0 veces
Fork me on GitHub