API Methods

Using the API

The Galleria methods are exposed in the instance. You have access to all methods listed here in the extend( [ options ] ) option or inside the Galleria.ready function.
Read more about how to use the Galleria instance in Extending Galleria

Slideshow

.play( interval )

returns Galleria

Starts the automatic slideshow and sets the interval length in milliseconds. If
no interval is given, default (5000 = 5 seconds) is used.

.pause()

returns Galleria

Stops the slideshow and resets the interval.

.playToggle()

returns Galleria

Stops the slideshow if currently playing, otherwise it start the slideshow.

.setPlaytime( milliseconds )

returns Galleria

Sets the interval of the autoplay slideshow at run-time.

.next()

returns Galleria

Displays the next image in line, or the first if you are at the last image.

.prev()

returns Galleria

Displays the previous image in line, or the last if you are at the first image.

.show( index )

returns Galleria

Shows the image specified as index. You can call this method anytime and the
image will be placed in a transition queue.

Display

.resize( [measures] )

returns Galleria

This will resize the entire gallery. ‘measures’ is an object with “width” and
“height” that you can pass to force a certain size. If no width or height is
passed, the gallery will extract new measures from the CSS.

.enterFullscreen( [callback] )

returns Galleria

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

The callback is called when the fullscreen mode has initialized (it takes
around 40 ms before everything is rescaled)

.exitFullscreen( [callback] )

returns Galleria

This will exit fullscreen mode and revert the gallery to it’s normal size and
also revert the document styles. The callback is called when the fullscreen
mode is turned off (it takes around 40 ms before everything is rescaled)

.toggleFullscreen( [callback] )

returns Galleria

Toggles fullscreen mode.

.openLightbox( [index] )

returns Galleria

This will pop out a lightbox window of the image. You can specify an index if
you want to display a different image than the currently active. The lightbox
window is fairly simple and pre-styled (no CSS or images needed). You can
define some values like the overlay opacity as a galleria option.

.closeLightbox()

returns Galleria

This will close the lightbox window.

.addIdleState(elem, styles)

returns Galleria

This will add an “idle” state of any element. The idle state activates when no
user interaction has been made for x amount of milliseconds. You can modify the
idle timeout using the idleTime option (default is 3000 milliseconds). Styles
is an object of CSS styles you wish to animate the element to when entering
idle state. Example:

// will fade out the thumbnails when entering idle modethis.addIdleState(this.get('thumbnails'),{opacity:0});

.removeIdleState(elem)

returns Galleria

Removes an elements idle state set using the addIdleState method.

.addPan( [image] )

returns Galleria

Manually applies a panning effect that revealse cropped areas on mousemove. If
no image specified, it will assume the currently displayed image. You can set
this to automatically add pan on each image using the image_pan option.

.removePan()

returns Galleria

Removes all panning effects set by addPan().

.refreshImage()

returns Galleria

Refreshes the image scale & position. Useful if you f.ex. change imageCrop options at run time and need to reposition the image accordingly.

Manipulation

.load( data )

returns Galleria

Loads new data into the gallery. The data should be structured as an Array and follow the same data patterns as the original JSON data

.splice( index, howMany[, element1[, …[, elementN]]] )

returns Galleria

Adds and/or removes images from the gallery. This method works just like the JavaScript Array.splice method as explained here:

.setCounter( [index] )

Sets the counter to the index or the active image if no index is specified.

.setInfo( [index] )

returns Galleria

Sets the captions to display data taken from the index or the active image if
no index is specified. Example:

this.bind('thumbnail',function(e){$(e.thumbTarget).hover(this.proxy(function(){this.setInfo(e.thumbOrder);// sets the caption to display data from the hovered imagethis.setCounter(e.index);// sets the counter to display the index of the hovered image},this.proxy(function(){this.setInfo();// reset the caption to display the currently active datathis.setCounter();// reset the caption to display the currently active data}));});

Retrieval

.$( elemIDs )

returns jQuery

Fetches elements from the Galleria DOM structure and returns a jQuery object
with all elements, very useful for theme development. You can specify a single
element ID or multiple elements in a comma-separated list. Example:

.unbind( type )

.trigger( type )

.lazyLoad( array, complete )

If you set thumbnails:lazy you can use this method to lazyLoad thumbnails at any time.
Just pass an array of indexes to make the gallery load the thumbnails. Example:

this.lazyLoad([0,1],function(){Galleria.log('Thumbnails 0 and 1 are loaded');});

.lazyLoadChunks( size, delay )

returns Galleria

If you set thumbnails:lazy you can use this method to set up Galleria to lazy load all thumbnails in chunks.
F.ex if you have 30 images, and want to load the first 10 thumbnails first, then the next 10 and so on, you can do:

this.lazyLoadChunks(10);

delay is an optional parameter that adds a delay in milliseconds between the loads.

.destroy()

returns Galleria

Wipes out the galleria gallery and restores the original content.

.attachKeyboard( map )

returns Galleria

This helper method attaches keyboard events to Galleria. The map object
contains a map of functions to execute when a certain keyCode is pressed.

You can use a number of helper keywords to identify common keys. The keywords
are up, down, left, right, return, escape and
backspace.

If you call this method again with the same key, you will simply override the
last function. Example attaching some keyboard action to galleria: