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

Muerte a IE: nuevo plugin

Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se [...]

Outlinr: a bookmarklet

Outlinr: web inspector para los pobres / web inspector for the poors Selecciona tu idioma / Select your language: English Español EN Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as [...]

jQuery browserSizr

Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores.

  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