setting up jquery slider function

Question

I'm trying to set up an function where if the slider I'm using (Royal Slider) is on a certain slide a .load function happens. I'm just not sure how to set it up and have been poking around for a while and can't seem to get it.

sliderInstance.currSlideId // current slide index

How using this would you set it up so when sliderInstance.currSlideId equals a slide value, in this case 2, then

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

is launched. http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp#api that's the api for the slider, I can't figure out how to get this to work, so any help would be greatly appreciated.

The over all script I currently have:

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

stephen.hanson · Accepted Answer · 2012-08-16 14:04:36Z

1

edit: updated to show how to integrate with your current code

First of all, disclaimer that I have never used Royal Slider, but I've been poking around in the docs. Have you tried using the rsAfterSlideChange event? Eg:

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

}

edited Aug 16, 2012 at 14:04

answered Aug 16, 2012 at 13:16

stephen.hanson

9,7642 gold badges52 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

loriensleafs Over a year ago

So I'm having a really hard time figuring out how that would fit into the over all script I have currently, I added to the original post, sorry to be a pest but could you help me implement it into that?

stephen.hanson Over a year ago

No problem. It should go in $(document).ready() anywhere after initializing sliderInstance. I updated my answer to show how it fits in.

Collectives™ on Stack Overflow

setting up jquery slider function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related