Question

This all seems to work great just the really strange thing is when I try to reference the var with .html(‘g’+index) it throws an object expected error. I guessing building the var isn’t the best thing?

var g0 = "<?php getFiles("gallery/Audience"); ?>";
var g1 = "<?php getFiles("gallery/Exhibition"); ?>";
var g2 = "<?php getFiles("gallery/registration"); ?>";
var g3 = "<?php getFiles("gallery/Speakers"); ?>";

$(".galleryButton").each(function (index) {
    $(this).click(function(){
        $('#galleria').html();                              
        $('#galleria').html('g'+index);
        initiateGallery();
    }).mouseover(function() {
        $(this).css('cursor', 'pointer');
        $(this).css('backgroundColor', '#002E53');
    }).mouseout(function(){
        $(this).css('backgroundColor', '#000');
    });
});

Answer 1

You could use eval to get the value of the variable gx.

$(this).click(function(){
    $('#galleria').html();                              
    $('#galleria').html(eval('g'+index));
    initiateGallery();
})

But as eval is evil you should use a switch-case to get the variables:

$(this).click(function(){
    $('#galleria').html();
    var contents;
    switch(index) {
        case 1:
            contents = g1;
            break;
        case 2:
            contents = g2;
        ...
    }
    $('#galleria').html(contents);
    initiateGallery();
})

I guess that you’re trying to clear the html of #galleria with this line:

$('#galleria').html();

You should pass an empty string to html() to clear the content:

$('#galleria').html('');