Using Events

You can bind functions to the Galleria events to build custom themes. All callbacks contains an event object as a function argument. The event object is similar to the one that jQuery uses in their event model, except that it adds even further properties to the event object, specified here.

In the callback, the this keyword inside the callback always refers to the gallery scope.

How to use the events

You can use the global Galleria.on() function to bind functions to events, f.ex:

Galleria.on('image', function(e) {
    Galleria.log(this); // the gallery scope
    Galleria.log(e.imageTarget); // the currently active IMG element

Or you can use .bind() inside the Galleria.ready or extend to listen to the Galleria events. Example:

Galleria.ready(function() {

    this.bind("thumbnail", function(e) {
        Galleria.log(this); // the gallery scope
        Galleria.log(e) // the event object

    this.bind("loadstart", function(e) {
        if ( !e.cached ) {
            Galleria.log( + ' is not cached. Begin preload...');