0

私は素晴らしくて柔軟なjQueryバナーローテーターを使用していますが、外部ソースからスライドをロードするように変更する必要がありました。外部ソースが正常に機能し、スライドショーが読み込まれましたが、遅延設定を認識できないようです。

基本的に、プラグインの開始方法を変更して、外部コンテンツをロードし、スライドショー機能の前にフォーマットするようにしました。

// 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にアップロードしました。

ありがとう！

4

2 に答える 2

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");
于 2012-07-26T18:15:17.753 に答える
0

$.each 関数は非同期で動作すると思うので、すべての画像が HTML に出力される前に Slider が作成されました。

それぞれの代わりに使用してみてください：

$.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);
});
于 2012-07-23T20:19:45.610 に答える