Home/ Questions/Q 8760147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T14:58:23+00:00

I’m using the galleria image gallery ( http://galleria.io/ ) with the classic theme on

  • 0

I’m using the galleria image gallery ( http://galleria.io/ ) with the classic theme on my web page.
I wanted to add a button that takes the user to a fullscreen mode. So, I took a look at the API and it seemed simple: I tried a couple of times and finally got it to work.
The thing is: it works perfectly the first time I open the html document but, when I close the fullscreen mode (by pressing esc or clicking the cross) and I try to open it again (by clicking the link I linked it to) it doesn’t work. It looks like it tries to open but something stops it: because it shows it for like one second.
I have no idea why this happens, can someone help me out here?

My html:

   <style>
  .content{width:700px;height:800px;margin:20px auto;}
        #galleria{height:700px}

    </style>

    <!-- load jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

    <!-- load Galleria -->
    <script src="../../galleria-1.2.8.min.js"></script>

    </head>
    <body>

      <div class="content">

                 <!-- the link for fullscreen mode -->
                 <a id="fullscreen" href="#"> fullscreen </a> 

                 <div id="galleria">

       <!--  and then all the images just like they were when opening the classic theme demo html -->
     </body>

And my javascript:

  <script>

 Galleria.ready(function() {
    var gallery = this; 


        gallery.attachKeyboard({

            left: gallery.prev,
            right: gallery.next,

        });

 $("#fullscreen").click(function() {

            gallery.enterFullscreen(); 

        });





     });



// Initialize Galleria

 Galleria.run("#galleria")

   // Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');
 </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just in case someone actually has the same odd problem as I did, I found the answer to it: The fullscreen wasn’t working in chrome because the default settings were somehow conflicting with it.. (being that I attached the fullscreen function to an tag).

    So basically what did it for me was to add an event.preventDefault() right before the enterfullscreen().

    The working code:

    // Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');

// Initialize Galleria
Galleria.run("#galleria", {

 extend:function() {
    var gallery = this; 


        gallery.attachKeyboard({

            left: gallery.prev,
            right: gallery.next,

        });

 $("#fullscreen").click(function() {

            event.preventDefault();

            gallery.enterFullscreen(); 

        });

 }
    • 0