Usando o jQuery para alterar a imagem src quando o navegador é redimensionado
Eu tenho duas imagens de tamanhos diferentes, uma para telas menores que 759px, a outra para telas maiores que 759px.
Eu consegui obter a fonte das imagens para alterar quando o documento é carregado dependendo da largura da janela. Mas eu realmente gostaria de poder fazer isso quando o navegador for redimensionado também, mas para a minha vida eu não consigo fazê-lo, ele só parece funcionar quando a página é inicialmente carregada.
Este é o meu código:
$(document).ready(function() {
function imageresize() {
var contentwidth = $(window).width();
if ((contentwidth) < '700'){
$('.fluidimage').each(function(){
var thisImg = $(this);
var newSrc = thisImg.attr('src').replace('x2', 'x1');
thisImg.attr('src', newSrc);
});
} else {
$('.fluidimage').each(function(){
var thisImg = $(this);
var newSrc = thisImg.attr('src').replace('x1', 'x2');
thisImg.attr('src', newSrc);
});
}
}
imageresize();//Triggers when document first loads
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
});