PHP/JavaScript para cambiar dinámicamente las rutas de las imágenes

Question

Esta es mi primera pregunta, por lo tanto, ignore los errores, si los hubiera.

Tengo un problema en el que estoy ofreciendo tres diseños alternativos a mis visitantes en función del dispositivo desde el que navegan.

Móvil, tableta, y Escritorio.

Mi sitio web está en PHP y estoy usando solo 280 bytes de JavaScript para determinar el ancho del navegador de mi visitante. No hay más JavaScript o bibliotecas como jQuery, MooTools. Quiero que mi sitio sea muy liviano, lo que da como resultado velocidades de carga de página más rápidas.

Tengo una variable PHP llamada $layout y el valor asignado a ella es asignado dinámicamente por el JavaScript en función del ancho del navegador. Los tres valores que se le asignan son mobile or tablet or desktop

Ahora tienen enlaces en mi XHTML que son como esto:

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

Por las imágenes predeterminadas están cargando desde la carpeta cdn/images/desktop.

Lo que estoy buscando es si el valor es $layout es tablet continuación, las imágenes deben cargar desde cdn/images/tablet carpeta y de manera similar, si la óptima relación de $layout es mobile continuación, las imágenes deben cargar desde cdn/images/mobile carpeta.

El nombre de las imágenes sigue siendo el mismo. Son tres resoluciones diferentes en tres carpetas diferentes.

Si es posible, sugiera una solución de PHP para hacerlo en PHP.

caso contrario por favor sugieren una llanura solución JavaScript (No hay bibliotecas como jQuery, MooTools ot tal)

Gracias

ACTUALIZACIÓN

En realidad estoy usando Joomla como CMS así que en mis publicaciones no puedo usar el código PHP en las publicaciones, por lo tanto, quiero que después de que se represente la página o durante la representación, estas rutas deban cambiar.

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> 

---

uso jQuery

---

lo siento, no sabía que no requieren 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)); 
    } 

---

ponerlo en el final del archivo.

---

<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1"> 

---

Answer 2

Prueba esto:

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

Answer 3

¿Por qué no usar JavaScript simple para cambiar el src de la imagen? no es tal vez el guión más bien mirado, pero se puede hacer algo como esto:

archivo XHTML:

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

después de que el javascript averiguar qué diseño se trata sólo de hacer:

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"; 

Es eso lo que quieres decir ?