javascript - केवल एक क्लिक के बाद w3school मॉडल(एक डीजेंगो टेम्प्लेट में) में शामिल फ़ाइलों को कैसे लोड करें?



jquery css (0)

मैं जावास्क्रिप्ट और एचटीएमएल के साथ बहुत नया हूं ताकि कृपया मेरे साथ खड़े रहें। मैं डब्ल्यू3एसस्कूल से सीएसएस मॉडल्स का इस्तेमाल कर रहा हूं, जो कि स्लाइडशो एम्बेड करने के लिए ऑन-क्लिक लोड किया जाना चाहिए।

<button onclick="document.getElementById('id01'.style.display='block'" class="w3-btn  w3-round-large   w3-black w3-small w3-padding-small">SLIDESHOW</button>

<div id="id01" class="w3-modal">
<div class="w3-modal-content">

मैं कई स्लाइडशो लोड कर रहा हूं जो मैं अपने विचारों के साथ एक डीजेंगो टेम्पलेट प्रदान करता हूं

<button onclick="document.getElementById('id|add:{{ lesson.id }}').style.display='block'" class="w3-btn  w3-round-large   w3-black w3-small w3-padding-small">SLIDESHOW</button>


  <div id="id|add:{{ lesson.id }}" class="w3-modal">
  <div class="w3-modal-content">
  <div class="w3-container">

  <div class="w3-content w3-display-container" >   

  {% for slideimage in lesson.images %} 
      <img class="{{ lesson.title }}" src= "{% static lesson.path|add:slideimage %}" style="width:100%">
  {% endfor %}


  <button class="w3-button w3-black w3-display-left" onclick="plusDivs{{ lesson.id }}(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs{{ lesson.id }}(1)">&#10095;</button>
  <span onclick="document.getElementById('id|add:{{ lesson.id }}').style.display='none'" class="w3-button w3-display-topright">&times;</span>

</div>

<script>
var slideIndex = 1;
showDivs{{ lesson.id }}(slideIndex);

function plusDivs{{ lesson.id }}(n) {
  showDivs{{ lesson.id }}(slideIndex += n);
}

function showDivs{{ lesson.id }}(n) {
  var i;
  var x = document.getElementsByClassName("{{ lesson.title }}");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

</div>
 </div>
 </div>
</div>

{% endfor %}

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</div>
</div>
</div>

{% endfor %}

मेरी समस्या यह है कि जब मैं पृष्ठ को खोलता हूं, तो टेम्पलेट्स सभी स्लाइडशो से जुड़े सभी फाइलों को प्रीलोड करती हैं जो पेज में शामिल हैं I मैं चाहता हूं कि फाइलें स्लाइडशो में शामिल हों, केवल जब स्लाइड शो सहित मोडल क्लिक पर ट्रिगर हो जाए।

एक समान प्रश्न ( यहां भी) पूछता है कि बूस्टैप के साथ उसी समस्या को कैसे हल किया जाए। मैं W3.css के साथ एक समान समाधान की तलाश कर रहा हूँ। ये अधिक सामान्य प्रश्न क्लिक पर लोडिंग से संबंधित हैं, और jquery या डीजेंगो के साथ फाइल लोड करने से बचने पर मुझे पता नहीं है कि डीजेंगो टेम्प्लेट में एम्बेडेड W3school मॉडल के साथ मेरी समस्या को हल करने के लिए मुझे किस तरह की तकनीक का उपयोग करना चाहिए।





modal-dialog