PHP/जावास्क्रिप्ट गतिशील रूप से छवि पथ बदलने के लिए

Question

यह मेरा पहला प्रश्न है, इसलिए कृपया गलतियों को अनदेखा करें, यदि कोई हो।

मुझे एक समस्या है जहां मैं अपने आगंतुकों को तीन वैकल्पिक लेआउट की सेवा कर रहा हूं, जिस डिवाइस से वे सर्फिंग कर रहे हैं।

मोबाइल, टैबलेट, और डेस्कटॉप।

मेरी वेबसाइट PHP में है और मैं अपने आगंतुक की ब्राउज़र चौड़ाई निर्धारित करने के लिए केवल 280 बाइट्स जावास्क्रिप्ट का उपयोग कर रहा हूं। JQuery, MooTools जैसी कोई अन्य जावास्क्रिप्ट या कोई पुस्तकालय नहीं है। मैं अपनी साइट को बहुत हल्का वजन रखना चाहता हूं जिसके परिणामस्वरूप तेज पृष्ठ लोड गति होती है।

मेरे पास एक PHP चर है जिसे $layout कहा जाता है और इसका मान ब्राउज़र की चौड़ाई के आधार पर गतिशील रूप से जावास्क्रिप्ट द्वारा असाइन किया जाता है।

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

डिफ़ॉल्ट छवियों तक cdn/images/desktop फ़ोल्डर से लोड कर रहे हैं: यह करने के लिए आवंटित तीन मानों mobile or tablet or desktop

अब मैं अपने एक्सएचटीएमएल में लिंक जो इस तरह हैं कर रहे हैं।

मैं क्या देख रहा हूँ अगर मूल्य $layouttablet है तो छवियों cdn/images/tablet फ़ोल्डर से लोड करना चाहिए और इसी तरह अगर $layout के valur है mobile तो छवियों cdn/images/mobile फ़ोल्डर से लोड करना चाहिए है।

छवियों का नाम वही रहता है। वे तीन अलग-अलग फ़ोल्डरों में तीन अलग-अलग संकल्प हैं।

PHP में ऐसा करने के लिए कृपया एक PHP समाधान का सुझाव दें।

अन्यथा एक सादे जावास्क्रिप्ट समाधान (jQuery की तरह नहीं पुस्तकालयों, MooTools ओ.टी. किसी भी तरह के)

धन्यवाद सुझाव है कृपया

अद्यतन

असल

मैं एक सीएमएस के रूप में जूमला का उपयोग कर रहा इसलिए मेरी पोस्ट में मैं पोस्ट के भीतर PHP कोड का उपयोग नहीं कर सकता, इसलिए मैं चाहता हूं कि पेज के बाद या प्रतिपादन के दौरान इन पथों को बदलना चाहिए।

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> 

---

उपयोग jQuery

---

माफ करना, मैं नहीं जानता था यह 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)); 
    } 

---

फ़ाइल के अंत में रख दें।

---

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

---

Answer 2

इस प्रयास करें:

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

Answer 3

कारण है कि आप सरल जावास्क्रिप्ट का उपयोग नहीं करते छवि के स्रोत को बदलने के लिए? यह शायद सबसे अच्छी तरह से देखा स्क्रिप्ट नहीं है, लेकिन आप कुछ इस तरह कर सकते हैं: जावास्क्रिप्ट पता लगाना

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

के बाद जो लेआउट यह सिर्फ कर रहा है:

एक्सएचटीएमएल फ़ाइल

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

क्या यही मतलब है तुम्हारा ?