Toggle Galleria Full Screen Mode

2013-04-17

An answer to this question on Stack Overflow.

Question

I am wondering if anyone knows how to toggle between full screen and normal mode in Galleria

The only way I can think of is to switch between themes : default, and Fullscreen theme (which i bought from there)

If you know an even better way, I would appreciate your help.

Answer

This should work:

Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js');
$('#galleria').galleria();
Galleria.ready(function() {
    var gallery = this;
    this.addElement('fscr');
    this.appendChild('stage','fscr');
    var fscr = this.$('fscr')
        .click(function() {
            gallery.toggleFullscreen();
        });
    this.addIdleState(this.get('fscr'), { opacity:0 });
});

CSS

.galleria-fscr{
    width:20px;
    height:20px;
    position:absolute;
    bottom:0px;
    right:10px;
    background:url('fullscreen.png');
    z-index:4;
    cursor: pointer;
    opacity: .3;
}
.galleria-fscr:hover{
    opacity:1;
}

Where fullscreen.png is an appropriate image of your choice.