Class: Gallery

Gallery(element, options)

The Gallery Class constructor
Parameters:
Name Type Description
element HTMLElement the container element which the gallery will live in
options Object optional gallery behavior
Properties
Name Type Attributes Description
nav boolean | string adds next and previous navigation buttons
autoplay boolean | string auto-advances the gallery
delay number duration (in miliseconds) between gallery transitions
pauseOnHover boolean | string pauses autoplay behvior when mouse/touch enters the gallery area
loop boolean | string enables left or right navigation, when the user reaches the first or last gallery item, respectively.
draggable boolean | string adds basic click-and-drag/swipe functionality to transition between gallery items
dragThreshold number minimum distance (in pixels) for a "drag" action to occur
pagination boolean | string creates a barebones navigation list of gallery items
paginationTarget HTMLElement <nullable>
 creates a navigation list of gallery items based on the element specified.
nextBtnMarkup string markup to override the default "next button" content
prevBtnMarkup string markup to override the default "previous button" content
liveRegionText string markup to override the default aria-live region content, use false to disable this
onLoad function function to run once the gallery is loaded
onWillChange function function to run before a gallery transition occurs
onHasChanged function function to run after a gallery transition occurs
Source:

Members

active

Get currently-active gallery item
Source:

activeIndex

Get the index of the currently-active gallery item
Source:

Methods

draggablePointerDown(e)

Stores the x-position of mouse/touch input
Parameters:
Name Type Description
e Object the event object
Source:

draggablePointerUp(e)

Advance gallery if drag distance meets or exceeds the established threshold.
Parameters:
Name Type Description
e Object the event object
Source:

handleAutoplay()

Handles the setting of the timer for autoplay galleries, taking into consideration the document's visibility state.
Source:

handlePagination(e)

Advances gallery to the index of the selected pagination item.
Parameters:
Name Type Description
e Object the event object
Source:

handleVisibilityChange()

Fires when the document's visbility chnages from the "hidden" state; Resumes autoplay functionality if applicable.
Source:

itemTransitioned(item) → {class}

Helper method to remove CSS transition classes
Parameters:
Name Type Description
item DOMNode Gallery item.
Source:
Returns:
This.
Type
class

loaded() → {class}

Removes loading classes and starts autoplay.
Source:
Returns:
This
Type
class

move(direction) → {class}

Changes active item
Parameters:
Name Type Default Description
direction boolean true True = forwards. False = backwards
Source:
Returns:
This
Type
class

moveByIndex(index) → {class}

Changes active item based on its index, starts at 0
Parameters:
Name Type Description
index number
Source:
Returns:
This
Type
class

next() → {class}

Move forward
Source:
Returns:
This.
Type
class

pause() → {class}

Pause autoplaying gallery
Source:
Returns:
This.
Type
class

prev() → {class}

Move backwards
Source:
Returns:
This.
Type
class

resize() → {class}

Adjust main wrapper height.
Source:
Returns:
This
Type
class

resume() → {class}

Resume autoplaying gallery
Source:
Returns:
This.
Type
class