frishi frishi - 6 months ago 72
Ajax Question

resetting bxSlider

I took a different direction with a carousel I implemented, opting for bxSlider instead of jCarousel. This is for an image gallery I am building http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

The issue I am running into is when I reset the filters, or select a different filter, the slider doesn't reset.
This is the code for the inital load:

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

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


//alert("whoa, careful there!");
$('#thumbs').bxSlider({auto: false, mode:'vertical',
autoControls: false,
autoHover: true,
pager: false,
displaySlideQty: 4,
speed:800,
infiniteLoop: true,
moveSlideQty: 4,

controls: true});
}

});//end ajax


This is the code for handling the change of a filter:

$(".statelist :input").click(function(){

var carousel = $('#thumbs').data('jcarousel');
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){
//alert("whoa, careful there!");

$('#thumbs').html(data);
$('#thumbs').bxSlider({auto: false, mode:'vertical',
autoControls: false,
autoHover: true,
pager: false,
displaySlideQty: 4,
speed:800,
infiniteLoop: true,
moveSlideQty: 4,

controls: true});


//$('#thumbs').jcarousel('add', index, data);
}


});//end ajax
});


I referred bxSlider's documentation and it had a built-in function to handle a reset:
destroyShow(): function()

reloadShow(): function()

I am confused as to what I am doing wrong.
Even tried emptying the carousel div before loading it with data, using .empty(), no dice.

Thoughts?

Edit: link to the bxSlider website: http://bxslider.com/

Answer

Declaring the "mySlider" variable outside the document-ready block solved the problem for me:

var mySlider;
$(function(){
    mySlider= $('#slider').bxSlider({
        auto: true,
        controls: true
    });

    mySlider.reloadShow();
})

Alex

Comments