Close button to fullscreen mode in Galleria

Question

If you have used the fullscreen mode in an instance of Galleria you've seen that the only way to close it is by pressing the escape key.

As I like that functionality since it's really practical, for end users it's not that intuitive so I would like to add a close button in the upper right.

I checked the code to find out where to add that button but I couldn't understand it to make it work.

Has someone already made that? I hope I'm not the only one who had that idea.

Thank you for your help!

Answer 1

You add it using the Galleria API:

Galleria.ready(function() {
    var gallery = this;
    this.addElement('exit').appendChild('container','exit');
    var btn = this.$('exit').hide().text('close').click(function(e) {
        gallery.exitFullscreen();
    });
    this.bind('fullscreen_enter', function() {
        btn.show();
    });
    this.bind('fullscreen_exit', function() {
        btn.hide();
    });
});

This will place the close text in the upper left corner, you should of course style it with som CSS, f.ex:

.galleria-exit{position:absolute;top:12px;right:12px;z-index:10;cursor:pointer}