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:
I'm attempting to assign/append a variable from a (click) function: (displayProjectA)...
/ there will be one for each of the four thumbnail categories/
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'}
]
}
}
},
...
]
