2012-07-19 61 views
0

我正在使用一個非常好用且靈活的jQuery橫幅旋轉器,但我需要修改它才能從外部源加載幻燈片。我得到了很好的外部源和幻燈片加載,但我似乎無法讓它識別延遲設置。jQuery Banner Rotator插件中的延遲設置不起作用

基本上我修改了插件啓動的方式,以便加載我的外部內容,然後在幻燈片放映功能之前對其進行格式化。

// Grabs data from Sphere Photo Gallery and formats the HTML for jQuery Banner Rotator plugin 
function sphereSlider(options) { 
    $.get("PhotoGallery.aspx.htm",function(data){ 
     var html = ''; 
     $(data).find('#pg_summary img').each(function(i){ 
      var imgsrc = $(this).attr("src"); 
      html += "<li>"; 
      html += "<a href='"+imgsrc+"'><img src='"+imgsrc+"' border=0/></a>"; 
      html += "<div class='imgCaption'>"; 
      html += "<h1>"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace("&nbsp;","")+"</h1>"; 
      html += "<a href='"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace("&nbsp;","")+"'></a>"; 
      html += "<div class='slideDesc'>"+$(data).find('#pg_summary .pg_longdescriptor:eq('+i+')').html()+"</div>"; 
      html += "</div>"; 
      html += "</li>"; 
     }); 
     $('.thumbnails ul').html(html); 
     $(".container").wtRotator(options); 
    }); 
} 

然後在HTML我把我的功能是這樣的:

<script type="text/javascript"> 
    $(document).ready(function() { 
     sphereSlider({ 
     width:900, 
     height:254, 
     thumb_width:24, 
     thumb_height:24, 
     button_width:24, 
     button_height:24, 
     button_margin:5, 
     auto_start:true, 
     delay:5000, 
     play_once:false, 
     transition:"block.fade", 
     transition_speed:800, 
     auto_center:true, 
     easing:"", 
     cpanel_position:"inside", 
     cpanel_align:"BR", 
     timer_align:"top", 
     display_thumbs:false, 
     display_dbuttons:false, 
     display_playbutton:false, 
     display_thumbimg:false, 
     display_side_buttons:true, 
     display_numbers:false, 
     display_timer:true, 
     mouseover_select:false, 
     mouseover_pause:true, 
     cpanel_mouseover:false, 
     text_mouseover:false, 
     text_effect:"fade", 
     text_sync:true, 
     tooltip_type:"text", 
     shuffle:false, 
     block_size:75, 
     vert_size:55, 
     horz_size:50, 
     block_delay:25, 
     vstripe_delay:75, 
     hstripe_delay:180  
    }); 
    } 
); 
</script> 

它應該工作,因爲所有其他設置工作。這只是沒有正確設置的延遲時間。任何幫助,將不勝感激。我已將完整源代碼上傳到http://www.truimage.biz/cc/rotator.zip進行故障排除。

謝謝!

回答

1

您可以通過刪除幾個文本輕鬆解決這個問題。

因爲「js/jquery.wt-rotator.js」中存在錯誤的註釋。

來源:

//Line: 1842 
//set delay 
//this._delay = this._$items[i].data("delay"); 

要:

//set delay 
this._delay = this._$items[i].data("delay"); 
+1

我認爲劇本的原作者只是爲了讓我感到啞巴。 – 2012-07-26 18:42:52

0

我認爲$ .each函數的工作原理是assync,所以Slider是在所有圖像輸出到HTML之前創建的。

嘗試使用爲每個insted的:

$.get("PhotoGallery.aspx.htm",function(data){ 
    var lbls=$(data).find('#pg_summary img'); 
    var html = ''; 
    for (var i=0; i< lbls.length; i++){ 
     var imgsrc = $(lbls[i]).attr("src"); 
     html += "<li>"; 
     html += "<a href='"+imgsrc+"'><img src='"+imgsrc+"' border=0/></a>"; 
     html += "<div class='imgCaption'>"; 
     html += "<h1>"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace("&nbsp;","")+"</h1>"; 
     html += "<a href='"+$(data).find('#pg_summary .pg_title:eq('+i+')').html().replace("&nbsp;","")+"'></a>"; 
     html += "<div class='slideDesc'>"+$(data).find('#pg_summary .pg_longdescriptor:eq('+i+')').html()+"</div>"; 
     html += "</div>"; 
     html += "</li>"; 
    } 
    $('.thumbnails ul').html(html); 
    $(".container").wtRotator(options); 
}); 
+0

並沒有真正改變的結果。幻燈片似乎忽略延遲設置,並正確設置所有其他設置。超級怪誕。 – 2012-07-24 17:00:06

+0

只是一個fyi,我通過實際將圖像html直接寫入其中並將sphereFunction剝離,只將其放在裏面: 'function sphereSlider(options){0121} ); }' 因此,我認爲這是調用它的HTML '$(文件)。就緒(函數(){ sphereSlider({選項}); });' – 2012-07-24 18:33:10

+0

任何其他的想法? – 2012-07-25 17:14:28