कॉलिंग jQuery सुपरस्लाइज्ड प्लगइन ऑनक्लिक

Question

मैं सुपरसराइज्ड प्लगइन को कॉल करने की कोशिश कर रहा हूं (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) ऑनक्लिक, अब तक जब मैं क्लिक करता हूं मेरी विभिन्न मेनू छवियों बदल रहे हैं, लेकिन यह supersized न द्वारा html मार्कअप निर्माण की तरह लग रहा पुनर्निर्माण मिलता है, अभी मैं यह मिल गया:

एचटीएमएल जो एक समारोह ब्राउन (कॉल) onclick:

<ul id="rooms_menu" style="display:none;"> 
<li><a href="javascript:;" onclick="brown()">menu title</a></li> 
<p class="rooms_desc">description text</p> 

एचटीएमएल जहां मैं एक AJAX प्रतिक्रिया गूंजता हूं:

<div id="script"> 

<script>$(function(){ 
     $.supersized({ 
         slides : [ 
        {image  : 'img/rooms-default.jpg'} 
        //{image  : 'img/rooms-default.jpg'} 
            ] 
        }) 
        })</script> 

</div> 

भौंह() एक ajax समारोह है:

function brown(){ 
     $.ajax({ 
     url: 'ajax.php?action=brown', 
     success: function(data){ 
     $('#script').html(data); 
      } 
      }) 

     } 

तो ajax.php फ़ाइल अपनी सामग्री लोड करता है #script को div:

switch($_GET["action"]){ 
     case "brown": 
     echo "<script>$(function(){ 
     $.supersized({ 
        slides :  [ 
       {image : 'img/rooms-brown-01.jpg'}, 
       {image : 'img/rooms-brown-02.jpg'} 
          ] 
          }) 

          })</script>"; 
     break; 
     case "rose": etc..... 

तो छवियों जब मैं पहली बार के लिए क्लिक करें अपडेट किया जाता है मेनू पर समय, लेकिन यदि मैं एक और मेनू शीर्षक पर क्लिक करता हूं तो छवियों को भी अपडेट किया जाता है लेकिन स्लाइड शो गड़बड़ शुरू होता है, ऐसा लगता है कि एचटीएमएल मार्कअप पुनर्निर्माण नहीं होता है, जब मैं प्रति मेनू शीर्षक (केवल सुपरस्लाइज्ड सरणी में केवल एक छवि) का उपयोग करता हूं कोई समस्या नहीं है। आर

Answer 1

इसके बजाय PHP से पूरी स्क्रिप्ट लौटने की, तो आप बस छवि टैग लौट सकते हैं (जैसे

<img src="images/image1.jpg" /><img src="images/image1.jpg" /> 

...)। फिर AJAX सफलता कॉलबैक में - $ ('# स्क्रिप्ट')। एचटीएमएल (डेटा); - आप

$('#script').empty(); 
$('#script').html(data); 
$('#script').supersized(); 

Answer 2

कर सकते हैं मेरा मानना ​​है कि यह $.supersize.resizenow विधि है जो सब कुछ सेट है, तो आप उस बुला की कोशिश की?

यह विफल हो रहा है, क्या आपके पास ऐसा लिंक है जो वेब एक्सेस करने योग्य है जहां आप इसे आजमा रहे हैं, इसलिए मैं देख सकता हूं?

Answer 3

क्या आपने एक नया संलग्न करने से पहले ईवेंट को अनबाइंड करने का प्रयास किया है? इस तरह:

switch($_GET["action"]){ 
     case "brown": 
     echo "<script>$(function(){ 
     $(window).unbind("resize");//add this. you could also add   
            //$('#supersized').html('') to remove markup created by the plugin 
     $.supersized({ 
        slides :  [ 
       {image : 'img/rooms-brown-01.jpg'}, 
       {image : 'img/rooms-brown-02.jpg'} 
          ] 
          }) 

          })</script>"; 
     break; 

आप क्योंकि प्लगइन खिड़की करने के लिए एक घटना बांधता है और यह करने के लिए हो सकता है आप के द्वारा बनाई गई पिछले एचटीएमएल को दूर भले ही प्लग इन पुराने घटना अभी भी आबद्ध है और यह दो बार सक्रिय करता है।

मुझे बताओ अगर आप किसी भी अंतर

संपादित नोटिस - मैं प्लगइन का कोड पर ध्यान दिया है। समस्या लाइन 16 पर स्थित है, मुझे लगता है, आदेश में:

setInterval("theslideshow()", options.slideinterval); 

एक समारोह एक दिया अंतराल पर कहा जाता है, और अगर यह साफ नहीं है, जब आप फिर से प्लगइन फोन, एक नया अंतराल सेट और इतने है आपको समय के साथ समस्या है। आप इस तरह प्लगइन को सही कर सकते हैं। इसके बजाय

if (options.slideshow == 1){ 
     setInterval("theslideshow()", options.slideinterval); 
    } 

 firstRunofThisPlugin = true; 
    if (options.slideshow == 1){ 
       if (firstRunofThisPlugin){ 
        firstRunofThisPlugin = false; 
       }else{ 
        clearInterval(linkToTheLastInterval); 
       } 
     linkToTheLastInterval = setInterval("theslideshow()", options.slideinterval); 
    } 

क्या आप कर रहे हैं setInterval() कॉल के लिए एक संदर्भ और फिर स्पष्ट अगली बार जब आप प्लगइन फोन का संदर्भ लेने को बचाने है डाल दिया।

यह दो वैश्विक चर का उपयोग करता है जो खराब है, लेकिन यदि यह समस्या हल करता है तो मैं ग्लोबल्स का उपयोग किए बिना इसे फिर से लिखने में आपकी सहायता कर सकता हूं।

पीएस आप प्लगइन के संस्करण को अपडेट क्यों नहीं करते?

Answer 4

इस कॉल करने के लिए साथ

$('#script').html(data); 

कोशिश नई स्क्रिप्ट जोड़ने से पहले:

function brown(){ 
    $.ajax({ 
    url: 'ajax.php?action=brown', 
    success: function(data){ 
     if($.supersized.vars.slideshow_interval){ 
     clearInterval($.supersized.vars.slideshow_interval); 
     } 
     $('#script').html(data); 
    } 
    }); 

} 

Answer 5

तुम सिर्फ क्यों लोड नहीं:

if($.supersized.vars.slideshow_interval){ 
    clearInterval($.supersized.vars.slideshow_interval); 
} 

विधि तो की तरह दिखना चाहिए सभी सेट और शो/उन्हें आवश्यकतानुसार छुपाएं?

<script> 
    $(function(){ 
    function selectSet() { 
     $(".set").hide(); 
     $(".set."+$(this).attr("id")).show(); 
    }; 
    $(".set.brown").each(selectSet); 
    }); 
</script> 

<a href="javascript:;" id="brown" onclick="selectSet()">Choose me!</a> 
<a href="javascript:;" id="rose" onclick="selectSet()">No choose me!</a> 

<div class="set brown"> 
    <script> 
    $(function() { 
     $.supersized({ 
     slides: [ 
      {image: 'img/rooms-1.jpg'}, 
      {image: 'img/rooms-2.jpg'} 
     ] 
     }); 
    }); 
    </script> 
</div> 

<div class="set rose"> 
    <script> 
    $(function() { 
     $.supersized({ 
     slides: [ 
      {image: 'img/rooms-3.jpg'}, 
      {image: 'img/rooms-4.jpg'} 
     ] 
     }); 
    }); 
    </script> 
</div>