Search code examples
jqueryajaxjcarousel

jCarousel resetting scroll position


I have a question about resetting the scroll position when I load new data in the jCarousel. The link is here: http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

New data comes in when you click on the filters in the sidebar on the left. However, if you start scrolling in the carousel on the right sidebar and then reselect filters, the newly loaded data doesn't reset to the top position.

I am emptying out the data in the div using .empty()

The scenario is like this:

First Load:

//first load
$.ajax({
    type:"POST",
    url:"sortbystate.php",
    data:"city=&gender=&category=",
    success:function(data){
            //carousel
            $('#thumbs').html(data);

    }

});//end ajax

Filter selection:

$(".statelist :input").click(function(){
    $('#thumbs').empty();

    var state = $('.statelist input:checked').attr('value');
    var gender = $('.gender input:checked').attr('value');
    var category =$('.category input:checked').attr('value');
        $.ajax({
            type:"POST",
            url:"sortbystate.php",
            data:"city="+state+"&gender="+gender+"&category="+category,
            success:function(data){

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

            }


        });//end ajax
    });

Solution

  • You can either reset the carousel as the new data is loaded:

           success:function(data){
    
                    carousel.reset();
                    $('#thumbs').html(data);
    
            }
    

    this will clear and reset the position.

    Or you can just call carousel.pos(0); to move back to the start.

    If you need more function it is best to look at the function available in the source:

    https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js