調用jQuery超大插件onclick

Question

我想調用超大插件（http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/）onclick，到目前爲止，當我點擊我diferent菜單中的圖像的轉換，但它看起來像由超大型不要HTML標記構建得到重建，現在我得到這樣的：

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> 

的HTML在那裏我回應一個阿賈克斯響應：

<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格：

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

所以當我點擊第一個圖像被更新時間在菜單上，但如果我點擊另一個菜單標題的圖像更新太多，但幻燈片開始搞亂，它看起來像HTML標記不重建，當我每個菜單標題只有一個圖像（超大數組中只有一個圖像）沒問題。 R.

Answer 1

，而不是返回從PHP整個腳本，你可以簡單地返回圖像標籤（比如

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

...）。然後在ajax成功回調代替 - $（'＃script'）。html（data）; - 你可以做

$('#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; 

您可能必須這樣做，因爲插件綁定一個事件窗口，即使你通過刪除先前創建的HTML插件舊的事件仍綁定並兩次觸發。

告訴我，如果你發現任何區別

編輯 - 我已經看過了插件的代碼。問題在於，我認爲，在命令第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（）調用的參考，然後清除。

這使用兩個全局變量，這是不好的，但如果它解決了問題，我可以幫助你重寫這個，而不使用全局變量。

P.S.你爲什麼不更新插件的版本？

Answer 4

與

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

嘗試添加新的腳本之前調用這個：

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

於是，該方法應該是這樣的：

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

你爲什麼不只是加載所有的設置和根據需要顯示/隱藏它們？

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