Picasa: automaticly change image size in the site

Question

I keep the images of my site in Picasa... as we know we can set size of picture like this.

http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w900-h0/running-sml.jpg

The part w900-h0 means that, the picture size is: width 900px and the height 0 (auto).

And so I need change this url, (acctualy the part w900-h0) of the image automaticly depending of the viewport of the device, I know that I can make images fluid just set them max-widht:100%; via css, but in that case the picture's size is not getting smaller, and it just visually small.

How can I change the part w900-h0 via java-script, for example when viewport is 480 the url is changed w300-h0 and so on.

Answer 1

You can use something like this to change image width in document.ready state:

imageWidth = $(window).width();
$("#my_image").attr("src","http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w"+imageWidth+"-h0/running-sml.jpg");

Function $(window).resize() can also be helpful to resize dynamicaly.

Update:

If you want to do this for more than one image:

imageWidth = $(window).width();
$(".imageForResize").each(function() {
  $(this).attr("src", $(this).attr('src').replace('w900-h0', 'w'+imageWidth+'-h0'));
});

Example on JSFiddle