PHP/JavaScript per modificare dinamicamente i percorsi delle immagini

Question

Questa è la mia prima domanda, quindi ignorare gli eventuali errori.

Ho un problema in cui sto servendo tre layout alternativi ai miei visitatori in base al dispositivo da cui stanno navigando.

Cellulare, Tablet, e Desktop.

Il mio sito Web è in PHP e sto utilizzando solo 280 byte di JavaScript per determinare la larghezza del browser del mio visitatore. Non ci sono altri JavaScript o librerie come jQuery, MooTools. Voglio mantenere il mio sito molto molto leggero, con conseguente maggiore velocità di caricamento della pagina.

Ho una variabile PHP denominata $layout e il valore ad esso è assegnato dal JavaScript dinamicamente in base alla larghezza del browser. I tre valori assegnati ad esso sono mobile or tablet or desktop

ora ho link nel mio xhtml che sono come questa:

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

Con le immagini predefinite vengono caricate dalla cartella cdn/images/desktop.

Quello che sto cercando è se il valore è $layout è tablet poi le immagini dovrebbero caricare dalla cartella cdn/images/tablet e allo stesso modo se il Valur di $layout è mobile poi le immagini devono caricare dalla cartella cdn/images/mobile.

Il nome delle immagini rimane lo stesso. Sono tre diverse risoluzioni in tre diverse cartelle.

Consigliamo gentilmente una soluzione PHP, se possibile, per farlo in PHP.

In caso contrario si prega di suggerire una pianura JavaScript soluzione (Nessun librerie come jQuery, MooTools ot tale)

Grazie

UPDATE

In realtà sto usando Joomla come CMS quindi nei miei post non posso usare il codice PHP all'interno dei post, quindi voglio che dopo il rendering della pagina o durante il rendering questi percorsi debbano cambiare.

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> 

---

utilizzare jQuery

---

dispiace non sapevo che non richiedono 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)); 
    } 

---

metterlo alla fine del file.

---

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

---

Answer 2

Prova questo:

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

Answer 3

Perché non utilizzare semplici javascript per cambiare lo src dell'immagine? non è forse lo script più ben guardato, ma si può fare qualcosa di simile:

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

dopo il javascript scoprire quale layout è semplicemente fare:

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

È questo che vuoi dire ?