jQuery Picture : Un plugin para implementar imágenes de diferentes tamaños

picture

jQuery Picture  es un pequeño plug-in (2kb) para  usar imagenes de diferente tamaño en  nuestro sitio web  dependiendo del tamaño del navegador.

Básicamente Jquery Picture redimensiona  una imagen  hasta llegar a un punto  limite donde manda  llamar a otra   y reemplaza  la existente  evitando así que la imagen original se distorsione, esto es muy útil para implementar en sitios web responsivos .

Tienes dos  maneras de utilizar el plugin, con la etiqueta <figure> o con  las etiquetas  <picture> y   <source> , aunque estas ultimas no son etiquetas validas para algunos navegadores .

Para usar el plugin :

Para utilizar la etiqueta <figure> es necesario  agregar la url de las imágenes que vamos a cargar mediante   atributos y agregamos el tamaño con el que se condicionara la carga de la imagen quedando de esta forma “data-media440” de esta forma le indicamos  al plugin  que  cuando la ventana del navegador llegue a 400px  o menos   cargue  la imagen correspondiente  :

Con <picture> en lugar de declarar las imágenes en los atributos  data, vamos a usar la etiqueta <source> para incluir cada una de ellas   especificando con  ‘ media=”(min-width:440px)”‘  los puntos donde se llamara a la imagen  :

Este seria el código usando <picture> :

 

[ Enlace : jQuery Picture ]

 

 

 

 

Comments
  1. Eduardo Hidalgo Responder

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *