jQuery Picture, imágenes de acuerdo al diseño

27-08-2012 JavaScript 1181 hits (10.33 %) 0 comentarios

La semana pasada mencionamos como redimensionar el contenido de una página web según el dispositivo de visualización (Redimensionar contenido de página web con CSS3 y HTML5), lo cual incluye las imágenes. Pues jQuery Picture es un pequeño plugin (2KB) que agrega soporte para las imágenes de una página web para que responda al diseño. Trabaja con el los elementos <figure>, y los nuevos <picture> y <source>. El otras palabras carga la imagen correspondiente de acuerdo a la dimensión del navegador.

jquery picture

Uso

$(function(){
    $('figure.responsive').picture();
});

En la parte del body:

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

Útil hasta que los nuevos elementos del HTML 5 sea aprobados por la mayoría de navegadores.

Enlace | jQuery Picture

Comentar

RibosoMatic