PHP / JavaScript to dynamically change image paths

hyperlink, javascript, joomla, path, php

Solution

$(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">

Problem

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.

Original source