Toggle Galleria Full Screen Mode

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 1

I’m just going to add to @Ohgodwhy’s answer:

The best way to get the Galleria instance and use the API is to use the Galleria.ready function:

Galleria.ready(function() {
  var gallery = this; // galleria is ready and the gallery is assigned
  $('#fullscreen').click(function() {
    gallery.toggleFullscreen(); // toggles the fullscreen
  });
});

Or, you can access the instance via the $.data object if you know that the gallery is initialized:

$('#fullscreen').click(function() {
  $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});

I am assuming you have a link/button with the ID 'fullscreen' and the gallery is at ID 'galleria'.

Answer 2

This should work:

JS

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.