javascripthtmlpicasafluid-images

Picasa: automaticly change image size in the site


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.


Solution

  • 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