Assign/append a value of a variable to then load its corresponding content from JSON array

I'm a novice working on an online gallery; the gallery will have categories (a,b,c,d) and 10 thumbnails each which will dynamically load content (text info + a set of larger images) from a JSON array...

The idea is:

1. I'm attempting to assign/append a variable from a (click) function: (displayProjectA)...
   
   / there will be one for each of the four thumbnail categories/




2. and filter it through one function... changing the value of the variable to then identify which section/category of content to load from the array (fillProject).

Here's what I'm having trouble with:

So far, I've tried passing a local variable (var a=x) through a few functions as well as setting one global variable (window['a']=x).. and changing/appending their value based on whatever category is being clicked, yet neither have worked... (fillProject)

Any help or a suggestion for better solution would be greatly appreciated. Thanks

function displayProjectA(){
 
     $('#categorya').on('click', 'li', function(){   
         var index = $(this).find('img').attr('src').split('/')[3].replace(/\.[^/.]+$/, "") - 1;
         var cat = $(this).find('img').attr('src').split('/')[2];
 
         $('#ajaxContainer').load('project.php' + ' .openedProject', function(response){
             resizeProject(index, cat);
         });
     });
 }
 

/* example of html markup for thumbnail: img src="projects/thumbs/categorya/1.jpg" */

function resizeProject(index, cat){
 
     var container = $('#projectContainer');
     var phContainer = $('#phContainer');
     var ajaxContainer = $('#ajaxContainer');
     var projectList = $('#projectList');
     var ww = $(window).width();
     var hh = $(window).height();
     var contentLength;
     var contentWidth;
     var contentHeight = container.height() + 28;
     var realHeight = 850;
     var projectsWidth = 0;
 
     ajaxContainer.height(hh);
     $('.openedProject').height(hh);
 
 
     fillProject(0, index, cat, function(dims){
         $('#ajaxContainer').attr('data-project', index);
 
 
     $.each(dims, function(key, image){
             projectsWidth += (image.width/image.height * 600) + 2;
         });
 
         contentLength =     container.find('article li').length;
         contentWidth = 13 + projectsWidth + 400;
         container.width(contentWidth);
         container.parent('.viewport').css('padding-top');
 
         projectList.animate({'left':-ww}, 500, function(){
             $('body').css('overflow','hidden');
             $('body').width($(window).width()).height(hh);
             $('#projectBackgroundContainer').width($(window).width()).height(hh);
             $(this).hide();
 
             fillNav(index);
 
             ajaxContainer.height(container.height() * 2).css('top',-container.height());
             ajaxContainer.show().animate({'top':0}, 800,function(){ 
             $('#scrollContent').tinyscrollbar({
                 axis:'x',
                 sizethumb:'auto'
             }); 
             $('#projectBackground').fadeTo(500,1).animate({'top':0}, 500);
             });
         });
     });
 }
 

I'd like to be able to handle each of the four displayProject*X* functions:

function fillProject(index, num, cat, callback){  
 
     var project = $('#ajaxContainer').find('.openedProject:eq('+index+')');
     var i = 0;
     var images = new Array();
 
     $('#ajaxContainer').attr('data-project',num);
     alert(cat); //test to see the value of the variable
 
 
     project.find('aside .name').html(cat[num].title); //not working when trying to use variable
     project.find('aside .type').html(categorya[num].type); //working when not 
     project.find('aside .number').html(categorya[num].more.number);  //working when not 
     project.find('aside .category').html(categorya[num].more.category);  //working when not 
     project.find('#projectBackground').attr('src','projects/background/'+categorya[num].more.media.background);  //working when not 
 
     $.each(categorya[num].more.media.images, function(key, image){  //working when not 
         if (key == 0){
             project.find('article ul').html('');
         }
         project.find('article ul').append('<li data-type="'+image.type+'"><img src="projects/main/'+image.url+'" alt="" style="height:600px;"/></li>');
         images[i] = 'projects/main/'+image.url;
         i++;
     });
 }
 

JSON array:

var categorya = [
     {
         title:'project 1',
         picture:'1.jpg',
         more:{
             number:'1',
             media:{
                 background:'bg_mainImg-a.jpg',
                 images:[
                     {type:'image',url:'mainImg-a1.jpg'},
                     {type:'image',url:'mainImg-a2.jpg'},
                     {type:'image',url:'mainImg-a3.jpg'},
                     {type:'image',url:'mainImg-a4.jpg'}
                 ]
             }
         }
     },
 ...
 ]
 

---