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.

Demarcation

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'.

Misinterpret

thanks! i was missing the .data(..) tho now that i get to call it, i see a bug in styling somewhere... please check this page : alturl.com/ycfy4 and try toggling the fullscreen using firebug or whatever... there is something fishy, i hope you can help me figure it out :) – Demarcation

@DanyKhalife what do you mean by "toggling the fullscreen using firebug"? You need a trigger, like a link, that toggles it on click. – Misinterpret

yup, but in firebug's Console, you can run Javascript commands. in your code you have this : $('#galleria').data('galleria').toggleFullscreen(); if you copy that and paste it in the firebug console (while on the page that contains the gallery), the code will run as if it was triggered by a button that was clicked – Demarcation

Answer 2

I'm using:

lightbox: true,

before Galleria.run(). This allows you to display fullscreen Overlay after clicking on image in the gallery.

Sixteenmo

Answer 3

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.

Stultify

Answer 4

The approach from Richard is working very well.

You could also do it by extending Galleria with-out the ready function:

JS

    Galleria.run('.galleria', {

    // configure
    autoplay: true,
    lightbox: true,
    idleMode: true,

    // extend theme
    extend: function() {
        var gallery = this; // "this" is the gallery instance

        //fullscreen button
        this.addElement('fscr');
        this.appendChild('stage','fscr');
        var fscr = this.$('fscr').click(function() {
            gallery.toggleFullscreen();
        });

        // this.addIdleState(this.get('fscr'), { opacity:0 });
    }
  });`

And if you'd like to use a fontAwesome icon for the maximize icon you can implement it as following (other CSS styles see Richard's post):

CSS

    .galleria-fscr:before {
      content: "\f065"; /* char code for fa-expand */
      position: absolute;
      font-family: FontAwesome;
      color: #fff;
   }

(keep in mind to include the style sheet of fontAwesome with <link rel="stylesheet" href="css/font-awesome.min.css">)

I'm still having one problem with the maximize button. If I'm hovering over it, it doesn't get white and stays gray. Maybe something with the IDLE state is wrong, but I haven't found a solution yet. (If I remove the code line with this.addIdleState(...) the hovering works. I need to do more tests here.)

I'd also like to change the icon from maximize to the minimize icon once the screen is on fullscreen, but I don't know how to do that yet. That's also on my todo list.

Update 07.02.2014

I figured out how to solve these two issues:

• For the "IDLE state" issue - I've removed the IDLE state. Because I don't care if these controls are permanently there and now hovering works as expected. Maybe I check another solution later.

• To change an icon on click you can do it with CSS and jQuery:

  1. Add an overriding CSS rule below the first before filter of the maximize icon in your CSS e.g.:

     .galleria-fscr.minimize:before{
         content: "\f066";
      }
     

  2. Add these JS line after gallery.toggleFullscreen() - that toggles the icon with every click between the normal before style and the minimize before style:

     $(".galleria-fscr").toggleClass("minimize");
     

This works also for a play / resume button (rest of the code is the simillar to the fullscreen code):

JS

    ...
    gallery.playToggle();
    $('.galleria-pauseResumeBtn').toggleClass("resume");

Xuthus

Answer 5

From the Galleria documentation.

.enterFullscreen( [callback] )

This will set the gallery in fullscreen mode. It will temporary manipulate some document styles and blow up the gallery to cover the browser screen. Note that it will only fill the browser window, not the client screen (javascript can’t do that).

.toggleFullscreen( [callback] )

Toggles fullscreen mode.

If you need any further explanation of the use of these, please don't hesitate to ask.

Mummer

thanks, but the problem is i don't see how to use this.. in other words, where should i call this from (which object? is it a jquery selector on the gallery ? because i dont have it defined...) other than that, i was looking for something that automatically adds the fullscreen button just like on the galleria homepage... any thoughts? – Demarcation

My assumption based on it's usability as explained in the documentation is this -> First, we need to have a trigger event, you can use jquery for this. We can use a click event, $("element").click(), or we can fire on document load $(function(){, either way, what has to enterFullscreen is going to be the element that is the gallery. So if our gallery has an id of #gallery, then it would be $("element").click(function(){ $("#gallery").enterFullscreen( [callback] ); }); $("element") is whatever you want to be your trigger-action. if you have an input with id of #button1, then $("#button1"). – Mummer

@Ohgodwhynot quite, you need to do $("#gallery").data('galleria').enterFullscreen(); – Misinterpret

@David Thanks, thats what i was looking for ;) just out of curiosity where in the world is the .data(...) written in the doc :D – Demarcation

ahh, data! good call David, and now I know if I ever use Galleria as well. Thanks for the tip. – Mummer

@DanyKhalife galleria.io/docs/1.2/references/extending/… – Misinterpret