0

使用しているスライダー（ロイヤルスライダー）が特定のスライド上にある場合に.load関数が発生する関数を設定しようとしています。どうやって設定すればいいのかわからず、しばらく突っ込んでいて手に入れられないようです。

SliderInstance.currSlideId//現在のスライドインデックス

これをどのように使用すると、sliderInstance.currSlideIdがスライド値（この場合は2）と等しい場合に設定します。 

function () {
    $('#light_content_container').load('http://www.klossal.com/portfolio/lightseries_content.html');
});

が起動されます。 スライダーのAPIであるhttp://dimsemenov.com/plugins/royal-slider/documentation/?s=dp#api、これを機能させる方法がわからないので、助けていただければ幸いです。

私が現在持っている全体的なスクリプト：

<script>            

jQuery(document).ready(function($) {
    var sliderInstance = $('#mySlider').royalSlider({
                    captionShowEffects:["moveleft", "fade"],
                    directionNavAutoHide: false,
                    autoScaleSlider: false,
                    imageScaleMode:"fit",                  // Scale mode of all images. Can be "fill", "fit"  
or "none"
                    imageAlignCenter:true,
                    navigateByClick:false,
                    keyboardNavEnabled:true,
                    controlNavThumbs:true,
                    directionNavEnabled: true,  
                    startSlideId: 1,
    deeplinking: {
        // fullscreen options go gere
        enabled: true,
        prefix: 'slider_port-'
    },                  
                    afterSlideChange:function() {
        xx=this.currSlideId;
        $('#thumb_scroll li').removeClass('library_thumb_active');
        $('#thumb_scroll li').eq(xx).addClass('library_thumb_active');


    },      


    }).data('royalSlider');             
    $("#makingof_goto").click(function() {
        sliderInstance.goTo(0);
    });
    $("#space_goto").click(function() {
        sliderInstance.goTo(1);
    });
    $("#light_goto").click(function() {
        sliderInstance.goTo(2);
    });
    $("#faces_goto").click(function() {
        sliderInstance.goTo(3);
    });
    $("#color_goto").click(function() {
        sliderInstance.goTo(4);
    });

$(document).keydown(function(e){
if (e.keyCode == 37) { 
     var leftPos = $('#thumb_scroll').scrollLeft();
     if(leftPos==0){
           $("#thumb_scroll").animate({scrollLeft: leftPos + 348}, 800);

     }
     else{
$("#thumb_scroll").animate({scrollLeft: leftPos - 150}, 800);
     }
      }


 if (e.keyCode == 39) { 

     var leftPos = $('#thumb_scroll').scrollLeft();

if(leftPos ==348){
           $("#thumb_scroll").animate({scrollLeft: leftPos - 348}, 800);

     }
     else{
$("#thumb_scroll").animate({scrollLeft: leftPos + 150}, 800);
     }

      }


});






});
</script>
4

1 に答える 1

1

編集：現在のコードと統合する方法を示すために更新されました

まず第一に、私はRoyal Sliderを使用したことがないという免責事項ですが、ドキュメントをざっと見てきました。rsAfterSlideChangeイベントを使用してみましたか？例えば：

$(document).ready(function() {
    // initialize slider
    var sliderInstance = ($('#mySlider').royalSlider({ ... }).data('royalSlider');

    // bind the rsAfterSlideChange event
    sliderInstance.ev.on('rsAfterSlideChange', function() {
        if(sliderInstance.currSlideId == 2) {
            // your code here!
           $('#light_content_container').load('http://www.klossal.com/portfolio/lightseries_content.html');
        }
    });

}
于 2012-08-16T13:16:31.607 に答える