Show:

The base class for Image Viewer.

Constructor

A.ImageViewerMultiple

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Methods

_afterAttachSwipeEvents

() protected

Attaches swipe events for the viewer's thumbnails.

_afterCurrentIndexChange

(
  • event
)
protected

<p>Fired after the <code>currentIndex</code> attribute is set.</p>

Parameters:

_afterMultipleBindUI

() protected

Fired after the bindUI method runs.

_afterMultipleCurrentIndexChange

() protected

Fired after the currentIndex attribute is set.

_afterMultipleRenderUI

() protected

Fired after the renderUI method runs.

_afterMultipleResponsive

() protected

Fired after the responsive event is triggered.

_afterPreloadAllImagesChange

() protected

<p>Fired after the <code>preloadAllImages</code> attribute is changed.</p>

_afterResponsive

() protected

<p>Fired after the <code>responsive</code> event.</p>

_afterScrollXChange

() protected

Fired after the scroll view's scrollX attribute changes.

_afterShowControlsChange

() protected

<p>Fired after the <code>showControls</code> attribute is changed.</p>

_afterSourcesChange

() protected

<p>Fired after the <code>sources</code> attribute is changed.</p>

_afterUISetVisible

() protected

<p>Fired after the <code>visible</code> attribute is set.</p>

_bindClickImages

() protected

Binds the events for clicking images.

_bindControls

() protected

<p>Binds the events related to the viewer's controls.</p>

_calculateOriginalDimensions

() Object protected

Calculates the original width and height of the widget, which will be used when changing its dimensions to preserve its ratio.

Returns:

Object:

<p><p>An object with the original dimensions</p></p>

_canChangeHeight

() Boolean

Checks if the height can be manually changed.

Returns:

Boolean:

_canChangeWidth

() Boolean

Checks if the width can be manually changed.

Returns:

Boolean:

_defAnimateFn

() protected

<p>Default behavior for animating the current image in the viewer.</p>

_defImageClicked

() protected

Default behavior for the imageClicked event. The current index is updated to point to the image that was clicked.

_defMakeImageVisible

() protected

Default behavior for the makeImageVisible event. The scroll position is updated to make the specified image visible.

_defResponsiveFn

(
  • event
)
protected

Default behavior for the responsive event. It updates the dimensions of the widget so it will respect the preserveRatio, maxHeight and maxWidth attributes.

Parameters:

_getCurrentImage

() Node protected

<p>Gets the current image node.</p>

Returns:

Node:

_getCurrentImageContainer

() protected

<p>Returns the container node for the current image.</p>

_getImageContainer

() protected

<p>Returns the image container node.</p>

_getImageContainerAtIndex

(
  • index
)
protected

<p>Returns the container node at the requested index.</p>

Parameters:

_handleResponsive

() protected

Fires the responsive event.

_isImageVisible

(
  • image
)
protected

Checks if the image at the given index is visible in the viewer.

Parameters:

_loadImage

(
  • index
)
protected

<p>Fires the necessary events to load the requested image.</p>

Parameters:

  • index Number

    <p><p>The index of the image to load.</p></p>

_loadVisibleImages

() protected

Loads all images that are currently visible in the viewer.

_onClickControl

(
  • event
)
protected

<p>Fired when one of the viewer's controls is clicked.</p>

Parameters:

_onClickImage

(
  • event
)
protected

Fired when one of the viewer's images is clicked.

Parameters:

_onCurrentImageReady

() protected

<p>This should be called when the current image is ready to be displayed.</p>

_onImageClicked

(
  • event
)
protected

Fired on the imageClicked event. Prevents its default behavior when the widget was scrolled, as the image shouldn't change when dragging.

Parameters:

_onImageLoad

() protected

<p>Fired when an image has finished loading.</p>

_onMakeImageVisible

() protected

Fired on the makeImageVisible event. It replaces the original logic for making the image visible through scrolling, using the scroll view for this instead.

_onMousedown

() protected

Fired when the mousedown event is triggered on the widget. Stores the value of scrollX at the moment the mousedown happened.

_onResponsive

() protected

<p>Fired on the <code>responsive</code> event.</p>

_preloadAll

() protected

<p>Preloads all the images if the <code>preloadAllImages</code> attribute is true.</p>

_renderControls

() protected

<p>Renders the viewer's controls.</p>

_renderImage

(
  • index
  • container
)
protected

<p>Renders the requested image and registers it to be loaded when used.</p>

Parameters:

  • index Number

    <p><p>The index of the image to be loaded.</p></p>

  • container Node

    <p><p>The container where the image should be added.</p></p>

_renderImageContainers

() Array protected

<p>Renders all image containers and returns them in an array.</p>

Returns:

Array:

<p><p>list of image containers</p></p>

_renderImageListNode

() Node protected

<p>Renders the image list node inside the image viewer.</p>

Returns:

Node:

<p><p>the image list node</p></p>

_renderImages

() protected

<p>Renders the images indicated in the <code>sources</code> attribute.</p>

_renderImagesForFirstTime

() protected

<p>Renders the images indicated in the <code>sources</code> attribute for the first time. If the images were already present before the widget is rendered, we'll mark these images as having already been loaded.</p>

_setCurrentIndex

(
  • val
)
protected

<p>Sets <code>currentIndex</code> attribute.</p>

Parameters:

_setImageAnim

(
  • val
)
protected

<p>Sets <code>imageAnim</code> attribute.</p>

Parameters:

  • val Object

_showCurrentImage

() protected

<p>Shows the current image in the viewer.</p>

_syncAriaCurrentImageUI

() protected

<p>Update the aria attributes for image.</p>

_syncControlsUI

() protected

<p>Updates the controls, showing or hiding them as necessary.</p>

_updateCurrentImageCSS

() protected

<p>Sets the CSS class that indicates the current image.</p>

bindUI

() protected

<p>Bind the events for the <code>A.ImageViewerBase</code> UI. Lifecycle.</p>

destructor

() protected

<p>Destructor implementation for the <code>A.ImageViewerBase</code> class. Lifecycle.</p>

hasNext

() Boolean

<p>Checks if there is a next element to navigate.</p>

Returns:

Boolean:

hasPrev

() Boolean

<p>Checks if there is a previous element to navigate.</p>

Returns:

Boolean:

initializer

() protected

Constructor for the A.ImageViewerMultipleSwipe. Lifecycle.

initializer

() protected

Constructor for the A.ImageViewerMultiple. Lifecycle.

next

()

<p>Loads the next image.</p>

prev

()

<p>Loads the previous image.</p>

renderUI

() protected

<p>Create the DOM structure for the <code>A.ImageViewerBase</code>. Lifecycle.</p>

updateDimensions

()

Updates the widget's dimensions so that it will fit the page better.

updateDimensionsWithNewRatio

()

Updates the widget's dimensions like the updateDimensions method, but also recalculates the ratio to be preserved. Useful if the visible content of the widget has changed causing the ratio to change as well.

Properties

CSS_PREFIX

String static

Static property provides a string to identify the CSS prefix.

Attributes

circular

Boolean

<p>If the image list will be circular or not.</p>

Default: false

controlNext

Node

<p>The node for the control that shows the next image.</p>

Default: null

controlPrevious

Node

<p>The node for the control that shows the previous image.</p>

Default: null

currentIndex

Number | String

<p>Index of the current image.</p>

Default: 0

gutter

Array

Vertical and horizontal values in pixels that should not be counted when preserving the widget's ratio. widget.

Default: [0, 0]

height

Number | String

The height of the image viewer.

Default: 100

imageAnim

Boolean | Object

<p>Configuration attributes passed to the <a href="Anim.html">Anim</a> class, or false if there should be no animation.</p>

Default: Predefined [Anim](Anim.html) configuration.

maxHeight

Number

The maximum height of the widget.

Default: Infinity

maxWidth

Number

The maximum width of the widget.

Default: Infinity

preloadAllImages

Boolean

<p>Preloads all images listed in the <code>sources</code> attribute.</p>

Default: false

preserveRatio

Boolean

Flag to indicate if the width/height ratio should be preserved.

Default: true

role

String

<p>Sets the <code>aria-role</code> for carousel.</p>

Default: 'listbox'

showControls

Boolean

<p>Shows the controls.</p>

Default: true

sources

Array

<p>The source links for the images to be shown.</p>

Default: []

useARIA

Boolean

<p>Boolean indicating if use of the WAI-ARIA Roles and States should be enabled.</p>

Default: true

useScrollViewPaginator

Boolean

Flag indicating if ScrollViewPaginator should be plugged.

Default: false

Events

animate

<p>Fired when the current image will be animated in.</p>

imageClicked

Fired when one of the viewer's images was clicked.

makeImageVisible

Fired when the widget needs to make an image visible.

responsive

Fired when the widget will be updated to be responsive.