The ImageViewer module allows article images to render in full screen mode.
- Source:
Properties:
Name | Type | Description |
---|---|---|
selectors |
Object | DOM element selectors |
states |
Object | different css states |
template |
String | template used for populating the image viewer |
$viewer |
HTMLElement | the current image viewer |
$currentImage |
HTMLElement | the current image selected to be shown in the image viewer |
$body |
HTMLElement | the body element |
$html |
HTMLElement | the root HTML Element |
keyboardListener |
function | keyboard key up listener |
maxWidth |
integer | maximum width for an image in the image viewer |
Methods
(inner) close(evt)
- Source:
Close the image viewer with an animation.
Parameters:
Name | Type | Description |
---|---|---|
evt |
Event | mouse click event. |
(inner) destroy()
- Source:
Completely remove the image viewer and the reference to it.
(inner) imageLoad($image)
- Source:
Flag an image as being loaded
Parameters:
Name | Type | Description |
---|---|---|
$image |
HTMLElement | the image that has been loaded |
(inner) init()
- Source:
Select expandable images and set up click listeners to trigger the image viewer.
(inner) initializeFullScreen($image, evt)
- Source:
Initialize the image viewer for viewing the selected image in full screen mode.
Parameters:
Name | Type | Description |
---|---|---|
$image |
HTMLElement | the selected image to be shown in full screen mode |
evt |
Event | click event |
(inner) interactWithKeyboard(evt)
- Source:
Close the image viewer with ESC key.
Parameters:
Name | Type | Description |
---|---|---|
evt |
Event | key up event |
(inner) track($elem)
- Source:
Analytics tracking.
Parameters:
Name | Type | Description |
---|---|---|
$elem |
HTMLElement | element triggering click tracking |