Micaela 16 de julio de 2009 a las 09.09
   Imprimir artículo
elWebmaster.com

jQuery: Redimensiona las imágenes de tu web junto con el navegador


jquery1En los diseños fluidos es fácil dar formato al texto para ajustarse bien cuando la ventana del navegador sea redimensionada, pero con las imágenes no suele ser tan sencillo el tema.

El rápido consejo que te damos en esta nota te enseñará cómo cambiar entre dos tamaños de imágenes distintos dependiendo del tamaño que posea la ventana del navegador en ese momento dado.

La técnica que utilizaremos puede usarse también para causar otros cambios en el redimensionamiento, más allá del simple cambio de las imágenes.

El HTML que necesitamos

<div id=”content”>
<img class=”fluidimage” src=”big.jpg”/>
<p>(Type words here)</p>
</div>

Es fundamental notar que adjuntamos .fluidimage a la imagen que deseamos “togglear”.

Y ahora el CSS

body{ text-align:center; }
img{ float: right; margin: 0px 10px 10px 10px;}
#content{ width:70%; margin: 0px auto; text-align: left; }

Para mantener la simplicidad en el CSS se ha excluido todo tipo de estilos gráficos, tales como bordes o fuentes.

Activando el cambio con jQuery

<script type=”text/javascript” src=”<a class=”linkification-ext” title=”Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” href=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”>http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>”></script>

<script type=”text/javascript”>
$(document).ready(function() {

function imageresize() {
var contentwidth = $(‘#content’).width();
if ((contentwidth) < ‘700’){
$(‘.fluidimage’).attr(‘src’,’little.jpg’);
} else {
$(‘.fluidimage’).attr(‘src’,’big.jpg’);
}
}

imageresize();//Triggers when document first loads

$(window).bind(“resize”, function(){//Adjusts image when browser resized
imageresize();
});

});
</script>

Cuando el documento esté preparado, establecemos una función (imageresize) que realiza el cambio de las imágenes dependiendo del ancho del navegador. Si el ancho del navegador es menos que 700px, se utilizará la imagen más pequeña, sino se mostrará la imagen de tamaño completo. Esta función se active ni bien carga la página y en cualquier momento que el navegador sea redimensionado.

¡Y listo!

Haz clic aquí para ver un demo»

Haz clic aquí para descargar esta técnica»

Fuente: Build Internet


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Juandresyn dice:

    Eencuentro muchos errors, intento arreglarlos y te cuento…
    por ejemplo… la imagen queda a un lado de la web y no centrada y pues, no hace el resize

  2. ariel dice:

    como puedo modificar el tamaño de las fotos que puse con el jquery??
    quiero agrandar el tamaño del contenedor pero no puedo, alguna ayuda?

  3. Daniel dice:

    Esto les puede funcionar
    http://danncortes.com/ajuste-de-imagenes-jquery/

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder