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

यह मेरा पहला प्रश्न है, इसलिए कृपया गलतियों को अनदेखा करें, यदि कोई हो।PHP/जावास्क्रिप्ट गतिशील रूप से छवि पथ बदलने के लिए

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

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

मेरी वेबसाइट 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 कोड का उपयोग नहीं कर सकता, इसलिए मैं चाहता हूं कि पेज के बाद या प्रतिपादन के दौरान इन पथों को बदलना चाहिए।

स्रोत

2012-05-06 Anonymous

प्रॉक्सी एक और PHP स्क्रिप्ट के माध्यम से जवाब - जूमला और बाकी सब कुछ के साथ काम करता है, बस कुछ वेब सर्वर विन्यास की जरूरत है। – hakre

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

स्रोत

2012-05-06 14:26:15 h2ero

हे मदद के लिए धन्यवाद, लेकिन इसे प्राप्त करने के लिए सिर्फ एक संपूर्ण jQuery लाइब्रेरी लोड करना एक अच्छा विचार नहीं है, खासकर जब मैं बहुत हल्की वजन साइट को बनाए रखने की कोशिश कर रहा हूं। –

अरे यह काम करता है लेकिन यहां चुनौती यह है कि पहले यह लोड हो रहा है 'सामान्य' छवि और फिर इसे फिर से 'छोटी' छवि के साथ बदल दिया जाता है। इस तरह यह एक के स्थान पर 2 छवियों को लोड कर रहा है। –

मैंने नया कोड पोस्ट किया है, 'src-data' के साथ एक नया आईएमजी विशेषता स्थापित कर रहा है और जावास्क्रिप्ट बदल रहा है नया कोड:) – h2ero

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

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

स्रोत

2012-05-06 13:43:02 Nauphal

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

आपके उत्तर में पिछला/चरित्र भी गुम है। हालांकि आवश्यक नहीं है, यह एचटीएमएल अच्छी तरह से बना एक्सएमएल बनाता है। ' ' – Eric

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

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

स्रोत

2012-05-06 14:07:52

असल में ये लिंक सीएमएस द्वारा उत्पन्न किए जा रहे हैं और प्रत्येक पृष्ठ पर वे अलग होंगे। क्या मैं एक साधारण उपयोग नहीं कर सकता जावास्क्रिप्ट फ़ंक्शन जो 'सीडीएन/इमेज/डेस्कटॉप /' जैसे पथ की तलाश करेगा और इसे '"सीडीएन/इमेज /" + लेआउट + "/" '' के साथ प्रतिस्थापित करेगा, यदि हां इसके लिए सही कोड क्या होगा? कृपया मदद करें। –

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

उत्तर

संबंधित मुद्दे