jQuery: Redimensiona las Imágenes de tu Web
Junto al Browser...Categoria: Tutoriales // MierColes, 20 de Enero de 2010 / 07:28:11:am @ Por:Crafter
En 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
Es fundamental notar que adjuntamos .fluidimage a la imagen que deseamos "togglear".
Y ahora el CSS
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
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!
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>
<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; }
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>
<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!
[Comentarios: 0]
