Tamaño de imágenes automático con jQuery

Escrito por: Martín el 21-12-2009 08:14:21 y leído 8573 veces

Este es el primero de una lluvia de post que voy a publicar todos juntos porque en este fin de semana dí con varios plugins para jQuery que me parecieron interesantes.

En este post, le toca el turno al jQuery maxImage plugin, que se encarga de redimensionar automáticamente las imágenes según su ratio, tamaño de la ventana del navegador y otras opciones.

Realmente, para entender su funcionamiento alcanza con mirar las demos:

1) Imagen de fondo. Ver demo

2) Ajustándose al tamaño de la pantalla (solo uno de los bordes). Ver demo

3) La imagen no sobrepasa su tamaño original. Ver demo

4) Como pase de diapositivas de fondo. Ver demo

Instalando:
Muy fácil, agrega la librería jQuery, descarga el jQuery maxImage plugin y sigue los siguientes pasos:

a) Inserta las librerías (código 1).
b) Agrega el código javascript dentro del head (código 2).
c) Agrega una imagen utilizando el class seleccionado en el código 2 (código 3)

Código XHTML

<script src="jquery.pack.js" type="text/javascript" charset="utf-8"></script>
 <script src="jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

Código JAVASCRIPT

$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true,
  verticalAlign: 'top'
 });
});

Código XHTML

<img src="url_to_image.jpg" class="className" />  

Categorías: Tamaño Texto • Jquery • Css • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

redimensionar imagenes jquery • redimensionar imagen jquery • jquery redimensionar imagen • redimensionar imagenes con jquery • cambiar tamaño imagen jquery • tamaño imagen jquery • jquery tamaño imagen • jquery redimensionar imagenes • slider jquery automatico • redimensionar imagen con jquery • slide automatico jquery • crear thumbnail como fondo de un div • jquery imagen de fondo • fondo web automatico • jquery cambiar tamaño imagen • imagen de fondo jquery • imagen de fondo con jquery • escalar imagenes jquery • cambiar tamaño de imagen con jquery • escalar imagen jquery • escalar una imagen al subir con php • tamaño de una imagen con jquery • carrusel imagenes jquery automatico • escalar imagenes con jquery • visor de imagenes con jquery • cambiar tamaño de imagen jquery • tamaño de imagen jquery • jquery escalar imagen • visor de imagenes jquery • obtener tamaño imagen jquery • cambiar imagenes jquery • scroll de imagenes jquery • jquery ajustar imagen • jquery ancho imagen • redimensionar imagenes html5 • jquery obtener tamaño imagen • redimensionar imagenes si excede ancho del navegador • saber el tamaño de una imagen jquery • jquery escalar imagenes • ajustar tamaño imagen jquery • imagen fondo jquery • cambiar tamaño imagen con slider Jquery • reducir tamaño imagen jquery • validar tamaño de imagen con jquery • redimensionar fondo jquery • resize imagen jquery • ajustar imagenes jquery • adaptar imagen tamaño ventana jquery • cambiar imagen con jquery • ajustar imagen con jquery • ancho imagen jquery • imagenes jquery • jquery imagenes • jquery imagen fondo • subir imagenes con jquery • saber tamaño imagen jquery • cambiar tamaño de imagenes con jquery • ajustar imagenes con jquery • altura imagen jquery • ajustar imagen jquery • tamaño de imagen con jquery • sencilla galeria imágenes jquery • codigo javascript para redimensionar imágenes • dimensionar imagen jquery • jquery maximage js • cambiar el tamaño de una imagen con jquery • obtener tamaño de imagen jquery • obtener el tamaño de una imagen jquery • jquery redimensionar fondo • redimencionar imagen jquery • jQuery lightBox tamalo imagen • redimensionar una imagen con jquery • ajustar imagen automaticamente a un div • ver ancho de una imagen jquery • redimensionar una imagen jquery • jquery validar tamaño imagen • jquery redimensionar imagen de fondo • dimensiones imagen jquery • imagen escalado segun ventana navegador • ajustar un div al tamaño de la imagen jquery • dimensiones de imagen jquery • redimensionar fotos jquery • obtener ancho imagen jquery • ajustar al navegador jquery • cambiar tamaño imagenes jquery • carrusel automatico jquery horizontal • demo visor de imagenes jquery • varias imagenes de background en javascript según resolucion • ajustar fotos jquery • jquery saber tamaño imagen • tamaño de una imagen jquery • jquery mirar tamaño ventana • cambiar fondo jquery • como colocar un imagen de fondo que se redimensiona de acuerdo al tamaño de la ventana • subir fotos jquery • adaptar imagen de fondo con javascript • ampliar imagen fondo jquery • jquery ui stars tamaño de la imagen • ajustar imagen a la monitor jquery • slide de imagenes automatico css •