PHP / JavaScript to dynamically change image paths - php

Question

This is my first question, hence please ignore mistakes, if any.
I have an issue where I am serving three alternate layouts to my visitors based on the device they are surfing from.
Mobile, Tablet, and Desktop.
My website is in PHP and I am using just 280 bytes of JavaScript to determine the browser width of my visitor. There is no other JavaScript or any libraries like jQuery, MooTools. I want to keep my site very very light weight thus resulting in faster page load speeds.
I have a PHP variable called $layout and the the value to it is assigned by the JavaScript dynamically based on the browser width. The three values assigned to it are mobile or tablet or desktop
Now I have links in my xhtml which are like this:
<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
By default images are loading from the cdn/images/desktop folder.
What I am looking for is if the value is $layout is tablet then the images should load from cdn/images/tablet folder and similarly if the valur of $layout is mobile then images should load from cdn/images/mobile folder.
Name of the images remain the same. They are three different resolutions in three different folders.
Kindly suggest a PHP solution if possible to do this in PHP.
Otherwise please suggest a plain JavaScript solution (No libraries like jQuery, MooTools ot any such)
Thanks
UPDATE
Actually I am using Joomla as a CMS so in my posts I cannot use PHP code within posts hence I want that after the page is rendered or during the rendering these paths must change.

Answer 1

$(function(){
//mobile or tablet or desktop
var client='<?php echo $layout; ?>'
if(client=='desktop'){
//do nothing
}else if(client=='tablet'){
$('#image-list img').each(function(){
$('this').attr('src',$(this).attr('src').replace('desktop','tablet'));
});
}else{
//mobile
$('#image-list img').each(function(){
$('this').attr('src',$(this).attr('src').replace('desktop','mobile'));
});
}
});
<div id="image-list">
<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
</div>
use jQuery
sorry i didn't know it don't require lib.
var client='<?php echo $layout; ?>'
var list=document.getElementById('image-list');
var img=list.getElementsByTagName('img');
for(var i=0;i<img.length;i++){
//img[i].src=img[i].src.replace('desktop',client);
img[i].setAttribute('src',img[i].getAttribute('src-data').replace('desktop',client));
}
put it in the end of file.
<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">

Answer 2

Try this:
<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">

Answer 3

why don't you use simple javascript to change the src of the image ?
it's maybe not the most nicely looked script but you can do something like this:
xhtml file :
<img id="image1" src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img id="image2" src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img id="image3" src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
after the javascript find out which layout is it just do:
document.getElementById("image1").src = "cdn/images/" + layout + "/image1.jpg";
document.getElementById("image2").src = "cdn/images/" + layout + "/image2.jpg";
document.getElementById("image3").src = "cdn/images/" + layout + "/image3.jpg";
is that what you mean ?