Class Galleria

Defined in: galleria.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Galleria() The main Galleria class

Method Summary
Method Attributes	Method Name and Description
	$(str) Converts element IDs into a jQuery collection You can call for multiple IDs separated with commas.
	addElement(id) Adds an element to the Galleria DOM array.
	addIdleState(elem, styles) Assign an "idle state" to any element.
	addPan(img) Adds a panning effect to the image
<static>	Galleria.addTheme(theme) Adds a theme that you can use for your Gallery
<static>	Galleria.addTransition(name, fn) Creates a transition to be used in your gallery
	appendChild(parentID, childID) Fast helper for appending galleria elements that you added using addElement()
	attachKeyboard(map) Attach keyboard events to Galleria
	bind(type, fn) Bind any event to Galleria
	bindTooltip(elem, value) Adds a tooltip to any element.
	closeLightbox() Close the lightbox.
	defineTooltip(elem, value) Redefine a tooltip Use this if you want to change the tooltip value at runtime
	detachKeyboard() Detach all keyboard events to Galleria
	enterFullscreen(callback) Enter FullScreen mode
	enterIdleMode() Force Galleria to enter idle mode.
	exitFullscreen(callback) Exits FullScreen mode
	exitIdleMode() Force Galleria to exit idle mode.
	get(elemId) Retrieve a DOM element by element ID
<static>	Galleria.get(index) Retrieves a Galleria instance.
	getActiveImage() Get the currently active image element.
	getActiveThumb() Get the currently active thumbnail element.
	getData(index) Retrieve a data object
	getDataLength() Retrieve the number of data items
	getIndex() Retrieve the currently active index
	getMousePosition(e) Get the mouse position relative to the gallery container
	getNext(base) Gets the next index
	getOptions(key) Retrieve the option
	getPrev(base) Gets the previous index
	getStageHeight() Retrieve the stage height
	getStageWidth() Retrieve the stage width
	hasInfo(index) Checks if the data contains any captions
	init(target, options) Use this function to initialize the gallery and start loading.
	load(source, selector, config) Loads data into the gallery.
<static>	Galleria.loadTheme(src, option) loadTheme loads a theme js file and attaches a load event to Galleria
<static>	Galleria.log() A helper metod for cross-browser logging.
	next() Shows the next image in line
	openLightbox() Open a pre-designed lightbox with the currently active image.
	pause() Stops the slideshow if currently playing
	play(delay) Starts playing the slideshow
	prependChild(parentID, childID) Fast helper for appending galleria elements that you added using addElement()
	prev() Shows the previous image in line
	proxy(fn, scope) Brings the scope into any callback
<static>	Galleria.raise(msg, fatal) Method for raising errors
	refreshImage() Refreshes the gallery.
	remove(elemID) Remove an element by blueprint
	removeIdleState(elem) Removes any idle state previously set using addIdleState()
	removePan() Removes the panning effect set by addPan()
	rescale(width, height, complete) Rescales the gallery
	setCounter(index) Manually modify the counter
	setInfo(index) Manually set captions
	setOptions(key, value) Set options to the instance.
	show(index, rewind, _history) Shows an image by index
	trigger(type) Manually trigger a Galleria event
	unbind(type) Unbind any event to Galleria
	updateCarousel() Updates the carousel, useful if you resize the gallery and want to re-check if the carousel nav is needed.

Class Detail

Galleria()

The main Galleria class
Author: http://aino.se.

var gallery = new Galleria();

Returns:: {Galleria}

Requires:: jQuery

Method Detail

{jQuery} $(str)

Converts element IDs into a jQuery collection You can call for multiple IDs separated with commas.

this.$('info,container').hide();

Parameters:
{String} str: One or more element IDs (comma-separated)

Returns:: {jQuery}

{Galleria} addElement(id)

Adds an element to the Galleria DOM array. When you add an element here, you can access it using element ID in many API calls

addElement('mybutton');

addElement('mybutton','mylink');

Parameters:
{String} id: The element ID you wish to use. You can add many elements by adding more arguments.

Returns:: {Galleria}

{Galleria} addIdleState(elem, styles)

Assign an "idle state" to any element. The idle state will be applied after a certain amount of idle time Useful to hide f.ex navigation when the gallery is inactive

addIdleState( this.get('image-nav'), { opacity: 0 });

addIdleState( '.galleria-image-nav', { top: -200 });

Parameters:
{HTML Element or String} elem: The Dom node or selector to apply the idle state to
{Object} styles: the CSS styles to apply

Returns:: {Galleria}

{Galleria} addPan(img)

Adds a panning effect to the image

Parameters:
img: The optional image element. If not specified it takes the currently active image

Returns:: {Galleria}

<static> {Object} Galleria.addTheme(theme)

Adds a theme that you can use for your Gallery

Parameters:

{Object} theme

Object that should contain all your theme settings.

name – name of the theme
author - name of the author
version - version number
css - css file name (not path)
defaults - default options to apply, including theme-specific options
init - the init function

Returns:: {Object} theme

<static> Galleria.addTransition(name, fn)

Creates a transition to be used in your gallery

Parameters:
{String} name: The name of the transition that you will use as an option
{Function} fn: The function to be executed in the transition. The function contains two arguments, params and complete. Use the params Object to integrate the transition, and then call complete when you are done.

{Galleria} appendChild(parentID, childID)

Fast helper for appending galleria elements that you added using addElement()

this.addElement('myElement');
        this.appendChild( 'info', 'myElement' );

Parameters:
{String} parentID: The parent element ID where the element will be appended
{String} childID: the element ID that should be appended

Returns:: {Galleria}

{Galleria} attachKeyboard(map)

Attach keyboard events to Galleria

this.attachKeyboard({
    right: this.next,
    left: this.prev,
    up: function() {
        console.log( 'up key pressed' )
    }
});

Parameters:
{Object} map: The map object of events. Possible keys are 'UP', 'DOWN', 'LEFT', 'RIGHT', 'RETURN', 'ESCAPE' and 'BACKSPACE'.

Returns:: {Galleria}

{Galleria} bind(type, fn)

Bind any event to Galleria

this.bind( Galleria.IMAGE, function() { Galleria.log('image shown') });

Parameters:
{String} type: The Event type to listen for
{Function} fn: The function to execute when the event is triggered

Returns:: {Galleria}

{Galleria} bindTooltip(elem, value)

Adds a tooltip to any element. You can also call this method with an object as argument with elemID:value pairs to apply tooltips to (see examples)

this.bindTooltip( this.get('thumbnails'), 'My thumbnails');

this.bindTooltip( this.get('thumbnails'), function() { return 'My thumbs' });

this.bindTooltip( { image_nav: 'Navigation' });

Parameters:
{HTML Element} elem: The DOM Node to attach the event to
{String or Function} value: The tooltip message. Can also be a function that returns a string.

Returns:: {Galleria}

{Galleria} closeLightbox()

Close the lightbox.

Returns:: {Galleria}

{Galleria} defineTooltip(elem, value)

Redefine a tooltip Use this if you want to change the tooltip value at runtime

Parameters:
{HTML Element} elem: The DOM Node to attach the event to
{String or Function} value: The tooltip message. Can also be a function that returns a string.

Returns:: {Galleria}

{Galleria} detachKeyboard()

Detach all keyboard events to Galleria

Returns:: {Galleria}

{Galleria} enterFullscreen(callback)

Enter FullScreen mode

Parameters:
{Function} callback: the function to be executed when the fullscreen mode is fully applied.

Returns:: {Galleria}

{Galleria} enterIdleMode()

Force Galleria to enter idle mode.

Returns:: {Galleria}

{Galleria} exitFullscreen(callback)

Exits FullScreen mode

Parameters:
{Function} callback: the function to be executed when the fullscreen mode is fully applied.

Returns:: {Galleria}

{Galleria} exitIdleMode()

Force Galleria to exit idle mode.

Returns:: {Galleria}

{HTML Element} get(elemId)

Retrieve a DOM element by element ID

Parameters:
{String} elemId: The delement ID to fetch

Returns:: {HTML Element} The elements DOM node or null if not found.

<static> {Galleria or Array} Galleria.get(index)

Retrieves a Galleria instance.

Parameters:
{Number} index: Optional index to retrieve. If no index is supplied, the method will return all instances in an array.

Returns:: {Galleria or Array}

{HTML Element} getActiveImage()

Get the currently active image element.

Returns:: {HTML Element} The image element

{HTML Element} getActiveThumb()

Get the currently active thumbnail element.

Returns:: {HTML Element} The thumbnail element

{Object} getData(index)

Retrieve a data object

Parameters:
{Number} index: The data index to retrieve. If no index specified it will take the currently active image

Returns:: {Object} The data object

{Number} getDataLength()

Retrieve the number of data items

Returns:: {Number} The data length

{Number} getIndex()

Retrieve the currently active index

Returns:: {Number} The active index

{Object} getMousePosition(e)

Get the mouse position relative to the gallery container

var gallery = this;
$(document).mousemove(function(e) {
    console.log( gallery.getMousePosition(e).x );
});

Parameters:
e: The mouse event

Returns:: {Object} Object with x & y of the relative mouse postion

{Number} getNext(base)

Gets the next index

Parameters:
{Number} base: Optional starting point

Returns:: {Number} the next index, or the first if you are at the first (looping)

getOptions(key)

Retrieve the option

Parameters:
{String} key: The option key to retrieve. If no key specified it will return all options in an object.

Returns:: option or options

{Number} getPrev(base)

Gets the previous index

Parameters:
{Number} base: Optional starting point

Returns:: {Number} the previous index, or the last if you are at the first (looping)

{Number} getStageHeight()

Retrieve the stage height

Returns:: {Number} The stage height

{Number} getStageWidth()

Retrieve the stage width

Returns:: {Number} The stage width

{Boolean} hasInfo(index)

Checks if the data contains any captions

Parameters:
{Number} index: Optional data index to fectch, if no index found it assumes the currently active index.

Returns:: {Boolean}

{Galleria} init(target, options)

Use this function to initialize the gallery and start loading. Should only be called once per instance.

Parameters:
{HTML Element} target: The target element
{Object} options: The gallery options

Returns:: {Galleria}

{Galleria} load(source, selector, config)

Loads data into the gallery. You can call this method on an existing gallery to reload the gallery with new data.

Parameters:
{Array or String} source: Optional JSON array of data or selector of where to find data in the document. Defaults to the Galleria target or data_source option.
{String} selector: Optional element selector of what elements to parse. Defaults to 'img'.
{Function} config: Optional function to modify the data extraction proceedure from the selector. See the data_config option for more information.

Returns:: {Galleria}

<static> Galleria.loadTheme(src, option)

loadTheme loads a theme js file and attaches a load event to Galleria

Parameters:
{String} src: The relative path to the theme source file
{Object} option: Optional options you want to apply

<static> Galleria.log()

A helper metod for cross-browser logging. It uses the console log if available otherwise it falls back to the opera debugger and finally alert()

Galleria.log("hello", document.body, [1,2,3]);

{Galleria} next()

Shows the next image in line

Returns:: {Galleria}

{Galleria} openLightbox()

Open a pre-designed lightbox with the currently active image. You can control some visuals using gallery options.

Returns:: {Galleria}

{Galleria} pause()

Stops the slideshow if currently playing

Returns:: {Galleria}

{Galleria} play(delay)

Starts playing the slideshow

Parameters:
{Number} delay: Sets the slideshow interval in milliseconds. If you set it once, you can just call play() and get the same interval the next time.

Returns:: {Galleria}

{Galleria} prependChild(parentID, childID)

Fast helper for appending galleria elements that you added using addElement()

this.addElement('myElement');
this.prependChild( 'info', 'myElement' );

Parameters:
{String} parentID: The parent element ID where the element will be preppended
{String} childID: the element ID that should be preppended

Returns:: {Galleria}

{Galleria} prev()

Shows the previous image in line

Returns:: {Galleria}

{Function} proxy(fn, scope)

Brings the scope into any callback

$('#fullscreen').click( this.proxy(function() { this.enterFullscreen(); }) )

Parameters:
fn: The callback to bring the scope into
scope: Optional scope to bring

Returns:: {Function} Return the callback with the gallery scope

<static> Galleria.raise(msg, fatal)

Method for raising errors

Parameters:
{String} msg: The message to throw
{Boolean} fatal: Set this to true to override debug settings and display a fatal error

{Galleria} refreshImage()

Refreshes the gallery. Useful if you change image options at runtime and want to apply the changes to the active image.

Returns:: {Galleria}

{Galleria} remove(elemID)

Remove an element by blueprint

Parameters:
{String} elemID: The element to be removed. You can remove multiple elements by adding arguments.

Returns:: {Galleria}

{Galleria} removeIdleState(elem)

Removes any idle state previously set using addIdleState()

Parameters:
{HTML Element or String} elem: The Dom node or selector to remove the idle state from.

Returns:: {Galleria}

{Galleria} removePan()

Removes the panning effect set by addPan()

Returns:: {Galleria}

{Galleria} rescale(width, height, complete)

Rescales the gallery

Parameters:
{Number} width: The target width
{Number} height: The target height
{Function} complete: The callback to be called when the scaling is complete

Returns:: {Galleria}

{Galleria} setCounter(index)

Manually modify the counter

Parameters:
{Number} index: Optional data index to fectch, if no index found it assumes the currently active index

Returns:: {Galleria}

{Galleria} setInfo(index)

Manually set captions

Parameters:
{Number} index: Optional data index to fectch and apply as caption, if no index found it assumes the currently active index

Returns:: {Galleria}

{Galleria} setOptions(key, value)

Set options to the instance. You can set options using a key & value argument or a single object argument (see examples)

setOptions( 'autoplay', true )

setOptions({ autoplay: true });

Parameters:
{String} key: The option key
{String} value: the the options value

Returns:: {Galleria}

{Galleria} show(index, rewind, _history)

Shows an image by index

Parameters:
{Number} index: The index to show
{Boolean} rewind: A boolean that should be true if you want the transition to go back
_history

Returns:: {Galleria}

{Galleria} trigger(type)

Manually trigger a Galleria event

Parameters:
{String} type: The Event to trigger

Returns:: {Galleria}

{Galleria} unbind(type)

Unbind any event to Galleria

Parameters:
{String} type: The Event type to forget

Returns:: {Galleria}

{Galleria} updateCarousel()

Updates the carousel, useful if you resize the gallery and want to re-check if the carousel nav is needed.

Returns:: {Galleria}

Classes

Class Galleria