Galleria

Configuration options

Here is a list of the options I use the most. Visit the official documentation page for more.

API Methods

To use the Galleria API methods you have to do 2 things. First you have to fetch the galleria instance. And the you use this instance to run the methods. Example:

Galleria.ready(function() {

    var gallery = this; // fetch galleria instance
    gallery.resize({ width: '100px', height: '100px' }); // run a method

});

How to customize the Galleria loader

To use your custom loader, go to preloaders.net and generate your gif. Make sure that it is not transparent, in order to be pixel perfect. Save the gif in the desired folder and in you css add:

.galleria-loader {
      background: url("./images/assets/loader.GIF") no-repeat scroll 2px 2px rgba(0, 0, 0, 0);
}

To center it, in your css add:

.galleria-loader {
    right: 50%;
    top: 50%;
}

How to hide navigation arrows when only one photo exist in data source

Just use this code:

Galleria.ready(function() {
    if( this.getDataLength() == 1 ){
        this.$('image-nav').hide();
    }
});

My galleria images are instantly seen

If you load the images through html, then you may see an instant splash of the images when you revisit the galleria page and the images are in cache. To solve this problem, just load the images through javascript.