[jQuery] dynamically reload your data in json (for categorical filtering)
What's going on here?
We're pulling in a json object with all of our data (itemListMaster)
and keeping a record of it to parse data from later and populate our
default json object (itemList). I'll comment in the code below to
explain what's going on.
### the code ###
var mycarousel_itemListMaster = [...]; //pull in/assign the data here
var mycarousel_itemList = [...]; //same as above
var carouselObj;//global object for your carousel
//this is the function we will be using to reload our carousel with
new data
function reloadCarousel(myCatCode){
mycarousel_itemList = []; //clear out the array
var jQList = mycarousel_itemListMaster; //get the number of items
from the master list to iterate through in order to find a matching
category
var counter = 0;
for(var i = 0; i < jQList.length; i++){
if (mycarousel_itemListMaster[i].catCode == myCatCode){ //check for
match in array with category code
mycarousel_itemList[counter] = mycarousel_itemListMaster[i]; //once
a match is found add it to your new array
counter++;
}
}
carouselObj.reset(); // reset the carousel object with the new data
}
//this is where we assign the carousel object to our new global
variable
function mycarousel_initCallback(carousel)
{
carouselObj = carousel;
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular',
initCallback: mycarousel_initCallback,
itemVisibleInCallback: {onBeforeAnimation:
mycarousel_itemVisibleInCallback},
itemVisibleOutCallback: {onAfterAnimation:
mycarousel_itemVisibleOutCallback}
});
reloadCarousel(mycarousel_itemListMaster[0].catCode); //we add
this line to the default code in order to display the content related
to the first category in our list of categories. you can remove this
to display all of your content on the initial load.
});