Multi galleries per page - almost working

This might help someone but its not 100% working.

I've tried to stop the theme not found error with IE by putting the them in the head etc but it still doesn't really help.

Although this all works clicking on the buttons to switch vars/galleries now gives me an Object Required error in the jquery.min.js which is weird considering it actually works.

<script type="text/javascript">
// <![CDATA[
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(){
        initiateGallery(eval('g'+index));
    }).mouseover(function() {
        $(this开发者_运维百科).css('cursor', 'pointer');
        $(this).css('backgroundColor', '#002E53');
    }).mouseout(function(){
        $(this).css('backgroundColor', '#000');
    });
});

var initiated = 'n';

$(document).ready(function() {
    initiateGallery(g3);
});

function initiateGallery(galleryRef){
    $('#galleria').html('');    
    $('#galleria').html(galleryRef);
    if (initiated == 'n'){
        Galleria.loadTheme('../Scripts/galleria.classic.min.js');
        initiated = 'y';
    }

$('#galleria').galleria({
        transition: 'fade',
        show_counter: true,
        imageCrop: true,
        thumbCrop: "height",
        thumbQuality: 'auto',
        autoplay: 3000,
        showInfo: true,
        easing: "galleriaOut"
    });
}
</script>

To switch themes, you just need to load a new one.

A much more elegant way to write it:

$(function() {

    var themes = [
        '<?php getFiles("gallery/Audience"); ?>',
        '<?php getFiles("gallery/Exhibition"); ?>', 
        '<?php getFiles("gallery/registration"); ?>',
        '<?php getFiles("gallery/Speakers"); ?>'
    ];

    Galleria.loadTheme( theme[0] );

    $('.galleryButton').click(function() {
        var theme = themes[ $(this).index() ];
        Galleria.loadTheme( theme );
    }).hover(function() {
        $(this).css('cursor', 'pointer').css('background-color', '#002E53');
    }, function() {
        $(this).css('background-color', '#000');
    });

    $('#galleria').galleria({
        transition: 'fade',
        show_counter: true,
        imageCrop: true,
        thumbCrop: "height",
        thumbQuality: 'auto',
        autoplay: 3000,
        showInfo: true,
        easing: "galleriaOut"
    });

});