Multi galleries per page - almost working

Question

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>

score 0 · Accepted Answer · answered Apr 09 '11 at 22:20

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"
    });

});

Knew it could be simplified but just didnt have the time NICE WORK! — MarkBeharrell, Apr 11 '11 at 08:38
This might not work as after reading this the problem is that the loadTheme command is actually Gallerias' method to load is gallery skin js. An amalgamation of mine and your code will probably do well... what im doing is loading a new set of images into the same element. — MarkBeharrell, Apr 11 '11 at 08:52
Don't really see why it won't work, I'm just using Galleria.loadTheme() to load a new theme from the themes array. — Sindre Sorhus, Apr 11 '11 at 08:58

Multi galleries per page - almost working

1 Answers1