Alloy UI

aui-image-viewer  1.0.1

 
Filters

Class ImageViewer - extends OverlayBase

Known Subclasses:
ImageGallery

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

Constructor

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

Properties

_keyHandler - protected EventHandler

Handler for the key events.

activeImage - protected Number

The index of the active image.

ImageViewer.ATTRS - static Object

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

ImageViewer.NAME - static String

Static property provides a string to identify the class.

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

anim - boolean

If true the navigation is animated.
Default Value: true

arrowLeftEl - Node

The element to be used as arrow left.
Default Value: Generated HTML div element.

arrowRightEl - Node

The element to be used as arrow right.
Default Value: Generated HTML div element.

caption - String

The caption of the displayed image.
Default Value: ''

captionEl - Node

The element to be used as caption.
Default Value: Generated HTML div element.

captionFromTitle - boolean

If true the caption will be pulled from the title DOM attribute.
Default Value: true

centered - boolean

If true the Overlay with the image will be positioned on the center of the viewport.
Default Value: true

closeEl - Node

The element to be used as close.
Default Value: Generated HTML div element.

currentIndex - Number

Index of the current image.
Default Value: 0

image - Node

Image node element used to load the images.
Default Value: Generated img element.

imageAnim - Object

Configuration attributes passed to the Anim class.
Default Value: Predefined Anim configuration.

infoEl - Node

The element to be used as info.
Default Value: Generated HTML div element.

infoTemplate - String

String template used to display the information.
Default Value: 'Image {current} of {total}'

links - String | NodeList

Selector or NodeList containing the links where the ImageViewer extracts the information to generate the thumbnails.

loader - Node

HTML element to house the img which is being loaded.
Default Value: Generated HTML div element.

loading - boolean

Whether the image is during a loading state.
Default Value: false

loadingEl - Node

The element to be used as loading.
Default Value: Generated HTML div element.

maxHeight - Number

The maximum height of the element
Default Value: Infinity

maxWidth - Number

The maximum width of the element
Default Value: Infinity

modal - boolean | Object

Displays the modal OverlayMask on the viewport. Set to false to disable.
Default Value: { opacity: .8, background: '#000' }

preloadAllImages - boolean

Preload all images grabbed from the links attribute.
Default Value: false

showArrows - boolean

Show the arrow controls.
Default Value: true

showClose - boolean

Show close icon control.
Default Value: true

totalLinks - boolean

Helper attribute to get the size of the links NodeList.
Default Value: true

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

_afterLoadingChange

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

_afterRender

protected void _afterRender ( event )
Fires after the ImageViewer render phase.
Parameters:
event <EventFacade>

_afterVisibleChange

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

_getInfoTemplate

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

_getRatio

protected Number _getRatio ( width , height )
Calculate the resize ratio for the loaded image.
Parameters:
width <Number> Image width
height <Number> Image height

_onClickCloseEl

protected void _onClickCloseEl ( event )
Fires the click event on the close icon.
Parameters:
event <EventFacade> click event facade

_onClickLeftArrow

protected void _onClickLeftArrow ( event )
Fires the click event on the left arrow icon.
Parameters:
event <EventFacade> click event facade

_onClickLinks

protected void _onClickLinks ( event )
Fires the click event on the links.
Parameters:
event <EventFacade> click event facade

_onClickRightArrow

protected void _onClickRightArrow ( event )
Fires the click event on the right arrow icon.
Parameters:
event <EventFacade> click event facade

_onKeyInteraction

protected void _onKeyInteraction ( event )
Handles the key interaction (i.e., next, prev etc).
Parameters:
event <EventFacade> click event facade

_onLoadImage

protected void _onLoadImage ( event )
Fires on a image load.
Parameters:
event <EventFacade>

_renderControls

protected void _renderControls ( )
Render the controls UI.

_renderFooter

protected void _renderFooter ( )
Render the footer UI.

_syncCaptionUI

protected void _syncCaptionUI ( )
Sync the caption UI.

_syncControlsUI

protected void _syncControlsUI ( )
Sync the controls UI.

_syncImageViewerUI

protected void _syncImageViewerUI ( )
Sync the ImageViewer UI.

_syncInfoUI

protected void _syncInfoUI ( )
Sync the info UI.

_uiSetImageSize

protected void _uiSetImageSize ( image )
Set the size of the image and the overlay respecting the maxHeight/maxWidth ratio.
Parameters:
image <HTMLImage> Image

bindUI

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

close

void close ( )
Close the ImageViewer.

destructor

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

getCurrentLink

Node getCurrentLink ( )
Get the current loaded node link reference.

getLink

Node getLink ( currentIndex )
Get the Node reference to the currentIndex element from the links.
Parameters:
currentIndex <Number>

hasLink

boolean hasLink ( currentIndex )
Check if there is a node reference for the currentIndex.
Parameters:
currentIndex <Number>

hasNext

boolean hasNext ( )
Check if there is a next element to navigate.

hasPrev

boolean hasPrev ( )
Check if there is a previous element to navigate.

hideControls

void hideControls ( )
Hide all UI controls (i.e., arrows, close icon etc).

hideMask

void hideMask ( )
Hide the OverlayMask used when modal is true.

loadImage

void loadImage ( src )
Load an image src on the ImageViewer.
Parameters:
src <String> Image src.

next

void next ( )
Load the next image.

preloadAllImages

void preloadAllImages ( )
Preload all images.

preloadImage

void preloadImage ( currentIndex )
Preload an image based on its index.
Parameters:
currentIndex <Number>

renderUI

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

show

void show ( )
Show the ImageViewer UI.

showLoading

void showLoading ( )
Show the loading icon.

showMask

void showMask ( )
Show the the OverlayMask used on the modal.

Methods inherited from Plugin.Host:

Events

anim

anim ( event )
Handles the anim event. Fired when the image anim ends.
Parameters:
event<Event.Facade> The load event.

animChange

animChange ( event )
Fires when the value for the configuration attribute 'anim' 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

arrowLeftElChange

arrowLeftElChange ( event )
Fires when the value for the configuration attribute 'arrowLeftEl' 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

arrowRightElChange

arrowRightElChange ( event )
Fires when the value for the configuration attribute 'arrowRightEl' 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

captionChange

captionChange ( event )
Fires when the value for the configuration attribute 'caption' 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

captionElChange

captionElChange ( event )
Fires when the value for the configuration attribute 'captionEl' 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

captionFromTitleChange

captionFromTitleChange ( event )
Fires when the value for the configuration attribute 'captionFromTitle' 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

centeredChange

centeredChange ( event )
Fires when the value for the configuration attribute 'centered' 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

closeElChange

closeElChange ( event )
Fires when the value for the configuration attribute 'closeEl' 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

currentIndexChange

currentIndexChange ( event )
Fires when the value for the configuration attribute 'currentIndex' 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

imageAnimChange

imageAnimChange ( event )
Fires when the value for the configuration attribute 'imageAnim' 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

imageChange

imageChange ( event )
Fires when the value for the configuration attribute 'image' 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

infoElChange

infoElChange ( event )
Fires when the value for the configuration attribute 'infoEl' 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

infoTemplateChange

infoTemplateChange ( event )
Fires when the value for the configuration attribute 'infoTemplate' 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

linksChange

linksChange ( event )
Fires when the value for the configuration attribute 'links' 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

load

load ( event )
Handles the load event. Fired when a image is laoded.
Parameters:
event<Event.Facade> The load event.

loaderChange

loaderChange ( event )
Fires when the value for the configuration attribute 'loader' 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

loadingChange

loadingChange ( event )
Fires when the value for the configuration attribute 'loading' 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

loadingElChange

loadingElChange ( event )
Fires when the value for the configuration attribute 'loadingEl' 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

maxHeightChange

maxHeightChange ( event )
Fires when the value for the configuration attribute 'maxHeight' 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

maxWidthChange

maxWidthChange ( event )
Fires when the value for the configuration attribute 'maxWidth' 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

modalChange

modalChange ( event )
Fires when the value for the configuration attribute 'modal' 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

preloadAllImagesChange

preloadAllImagesChange ( event )
Fires when the value for the configuration attribute 'preloadAllImages' 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

request

request ( event )
Handles the request event. Fired when a image is requested.
Parameters:
event<Event.Facade> The load event.

showArrowsChange

showArrowsChange ( event )
Fires when the value for the configuration attribute 'showArrows' 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

showCloseChange

showCloseChange ( event )
Fires when the value for the configuration attribute 'showClose' 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

totalLinksChange

totalLinksChange ( event )
Fires when the value for the configuration attribute 'totalLinks' 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: