Question

So what I have is the following HTML structure

<div class="large">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

Now that mythumb.php is a thumbnailer script that will on the fly create a thumbnail with predefined size limits (in this case 800×600).

However in my CSS file i’ve set

.large img
{
width:400px;
height:300px;
}

This is done so I achieve a retina effect on iphones/ipad, etc..

However, I was thinking this is better to be accomplished dynamically, and I want to be able to pull the CSS defined width and height and replace those values in the URL

In this case, would it be possible for javascript to change

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

to

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1

This change should occur before the image loads so we dont waste the users bandwidth downloading the same image twice.

I would also like to only apply this to images being called from the mythumb.php, not my other static images on the page

Does anyone think something like this is possible?

Answer 1

in html layout your img tags, but omit a src attribute

<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>

in js set up an array of your image paths:

myImages = {
    test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
    test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}

Your css determines the img sizes, so you can query the img style, build the url and assign the src to the img tags

$('.variableRes').each(function(){
    var $el = $(this);
    var id = $el.attr("id");
    var height = $el.css("height").substr(0,-2);//strip "px"
    var width = $el.css("width").substr(0,-2);
    $el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})