Alloy UI

aui-image-viewer  1.0.1

 
Filters

Class ImageGallery - extends ImageViewer

A base class for ImageGallery, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Displays an image in a Overlay
  • Displays list of thumbnails of the images as a control
  • Slide show functionalities (i.e., play, pause etc)
  • Keyboard navigation support
Quick Example:
var instance = new A.ImageGallery({
links: '#gallery1 a',
caption: 'Liferay Champion Soccer',
captionFromTitle: true,
preloadNeighborImages: true,
preloadAllImages: true,
showInfo: true
}).render();
Check the list of Configuration Attributes available for ImageGallery.

Constructor

ImageGallery ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

_timer - protected Number

Stores the A.later reference.

ImageGallery.ATTRS - static Object

Static property used to define the default attribute configuration for the ImageGallery.

ImageGallery.NAME - static String

Static property provides a string to identify the class.

toolbar - protected Toolbar

Toolbar instance reference.

Properties inherited from ImageViewer:

Properties inherited from WidgetStack:

Properties inherited from Attribute:

Properties inherited from Component:

Properties inherited from WidgetPositionAlign:

Properties inherited from Base:

Properties inherited from WidgetStdMod:

Properties inherited from WidgetPosition:

Properties inherited from WidgetPositionConstrain:

Configuration Attributes

autoPlay - boolean

If true the slide show will be played when the ImageGallery is displayed.
Default Value: false

delay - Number

Delay in milliseconds to change to the next image.
Default Value: 7000

paginator - Object

Paginator configuration Object. The Paginator handles the thumbnails control.
Default Value: Paginator configuration Object.

paginatorEl - Node

Element which contains the Paginator with the thumbnails.
Default Value: Generated HTML div.

paginatorInstance - Paginator

Stores the Paginator instance.
Default Value: null

paused - boolean

If true the slide show is paused.
Default Value: false

pausedLabel - String

Label to display when the slide show is paused.
Default Value: ''

playing - boolean

If true the slide show is playing.
Default Value: false

playingLabel - String

Label to display when the slide show is playing.
Default Value: '(Playing)'

repeat - boolean

Restart the navigation when reach the last element.
Default Value: true

showPlayer - boolean

Show the player controls (i.e., pause and show buttons).
Default Value: true

toolbar - Toolbar constructor.

Toolbar with a play, and pause buttons.
Default Value: Generated Toolbar with a play, and pause buttons.

useOriginalImage - boolean

If true will use the original image as thumbnails.
Default Value: false

Configuration attributes inherited from Widget:

Configuration attributes inherited from WidgetStack:

Configuration attributes inherited from Component:

Configuration attributes inherited from WidgetPositionAlign:

Configuration attributes inherited from Base:

Configuration attributes inherited from WidgetStdMod:

Configuration attributes inherited from WidgetPosition:

x,
xy,
y

Configuration attributes inherited from WidgetPositionConstrain:

Methods

_afterVisibleChange

protected void _afterVisibleChange ( event )
Fires after the value of the visible attribute change.
Parameters:
event <EventFacade>

_bindToolbarUI

protected void _bindToolbarUI ( )
Bind the Toolbar UI for the play and pause buttons.

_cancelTimer

protected void _cancelTimer ( )
Cancel the timer between slides.

_changeRequest

protected void _changeRequest ( event )
Change the UI when click on a thumbnail.
Parameters:
event <EventFacade>

_getInfoTemplate

protected String _getInfoTemplate ( v )
Get the info template.
Parameters:
v <String> template
Returns: String
Parsed string.

_onPausedChange

protected void _onPausedChange ( event )
Fires before the value of the paused attribute change.
Parameters:
event <EventFacade>

_onPlayingChange

protected void _onPlayingChange ( event )
Fires before the value of the playing attribute change.
Parameters:
event <EventFacade>

_renderPaginator

protected void _renderPaginator ( )
Render the Paginator with the thumbnails.

_renderPlayer

protected void _renderPlayer ( )
Render the player controls.

_setThumbContent

protected void _setThumbContent ( pageEl , pageNumber )
Parameters:
pageEl <Node>
pageNumber <Number>

_startTimer

protected void _startTimer ( )
Start the timer between slides.

_syncControlsUI

protected void _syncControlsUI ( )
Sync the controls UI.

_syncSelectedThumbUI

protected void _syncSelectedThumbUI ( )
Sync the selected thumb UI.

_syncSlideShow

protected void _syncSlideShow ( )
Sync the slide show UI.

bindUI

protected void bindUI ( )
Bind the events on the ImageGallery UI. Lifecycle.

destroy

protected void destroy ( )
Descructor lifecycle implementation for the ImageGallery class. Purges events attached to the node (and all child nodes).

hidePaginator

void hidePaginator ( )
Hide the Paginator with the thumbnails list.

pause

void pause ( )
Pause the slide show.

play

void play ( )
Play the slide show.

renderUI

protected void renderUI ( )
Create the DOM structure for the ImageGallery. Lifecycle.

show

void show ( )

Show the ImageGallery.

NOTE:Overloads the ImageViewer show method to not loadImage, the changeRequest now is responsible to do that if we invoke the superclass show method its loading the image, and the changeRequest loads again, avoiding double request.

showPaginator

void showPaginator ( )
Show the Paginator with the thumbnails list.

Methods inherited from Plugin.Host:

Events

autoPlayChange

autoPlayChange ( event )
Fires when the value for the configuration attribute 'autoPlay' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

delayChange

delayChange ( event )
Fires when the value for the configuration attribute 'delay' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

paginatorChange

paginatorChange ( event )
Fires when the value for the configuration attribute 'paginator' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

paginatorElChange

paginatorElChange ( event )
Fires when the value for the configuration attribute 'paginatorEl' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

paginatorInstanceChange

paginatorInstanceChange ( event )
Fires when the value for the configuration attribute 'paginatorInstance' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pausedChange

pausedChange ( event )
Fires when the value for the configuration attribute 'paused' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

pausedLabelChange

pausedLabelChange ( event )
Fires when the value for the configuration attribute 'pausedLabel' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

playingChange

playingChange ( event )
Fires when the value for the configuration attribute 'playing' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

playingLabelChange

playingLabelChange ( event )
Fires when the value for the configuration attribute 'playingLabel' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

repeatChange

repeatChange ( event )
Fires when the value for the configuration attribute 'repeat' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

showPlayerChange

showPlayerChange ( event )
Fires when the value for the configuration attribute 'showPlayer' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

toolbarChange

toolbarChange ( event )
Fires when the value for the configuration attribute 'toolbar' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

useOriginalImageChange

useOriginalImageChange ( event )
Fires when the value for the configuration attribute 'useOriginalImage' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from WidgetStack:

Events inherited from Base:

Events inherited from WidgetPosition: