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.
Modo de Uso
- Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
- Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
- 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+
Comentarios
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
[…] web, y el usarlo en tu sitio web o blog es muy sencillo, solamente debes de descargar el plugin FontSizer y jQuery en cualquier versión superior a la […]
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)
Muy bueno, y facil de usar, si concuerdo con Carlos 😀
[…] Flipv (Demo – Descarga) 2. FontEffect (Demo – Descarga) 3. FontSizer (Demo – Descarga) 4. Scrabble Text (Demo – Descarga) 5. Moatext (Demo – […]
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…
El jquery.fontSizer.js falla cuando usamos en pantalla el api de Gmaps:
Error: $(“#aumentar”).fontSizer is not a function
Situándo la carga de la librería jquery.fontSizer.js después de gmaps.js funciona perfectamente.
Asi es Nuevo es mejor dejar los JS q no dependen de jQuery antes de esa libreria y juntar las dependientes luego del llamado de jQuery, y al final del </head>
Muy bueno, aunque me he liado un poco implementándolo 😛
Probado con jQuery 1.2.5 funciona perfectamente.