API
Gallery
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
Object (optional, default{}
)options.galleryItemSelector
String Selector for gallery element (optional, default'[data-ecl-gallery-item]'
)options.descriptionSelector
String Selector for gallery description element (optional, default'[data-ecl-gallery-description]'
)options.metaSelector
String Selector for gallery meta info element (optional, default'[data-ecl-gallery-meta]'
)options.closeButtonSelector
String Selector for close button element (optional, default'[data-ecl-gallery-close]'
)options.overlaySelector
String Selector for gallery overlay element (optional, default'[data-ecl-gallery-overlay]'
)options.overlayHeaderSelector
String Selector for gallery overlay header element (optional, default'[data-ecl-gallery-overlay-header]'
)options.overlayFooterSelector
String Selector for gallery overlay footer element (optional, default'[data-ecl-gallery-overlay-footer]'
)options.overlayMediaSelector
String Selector for gallery overlay media element (optional, default'[data-ecl-gallery-overlay-media]'
)options.overlayCounterCurrentSelector
String Selector for gallery overlay current number element (optional, default'[data-ecl-gallery-overlay-counter-current]'
)options.overlayCounterMaxSelector
String Selector for display of number of elements in the gallery overlay (optional, default'[data-ecl-gallery-overlay-counter-max]'
)options.overlayDownloadSelector
String Selector for gallery overlay download element (optional, default'[data-ecl-gallery-overlay-download]'
)options.overlayShareSelector
String Selector for gallery overlay share element (optional, default'[data-ecl-gallery-overlay-share]'
)options.overlayDescriptionSelector
String Selector for gallery overlay description element (optional, default'[data-ecl-gallery-overlay-description]'
)options.overlayMetaSelector
String Selector for gallery overlay meta info element (optional, default'[data-ecl-gallery-overlay-meta]'
)options.overlayPreviousSelector
String Selector for gallery overlay previous link element (optional, default'[data-ecl-gallery-overlay-previous]'
)options.overlayNextSelector
String Selector for gallery overlay next link element (optional, default'[data-ecl-gallery-overlay-next]'
)options.attachClickListener
Boolean Whether or not to bind click events (optional, defaulttrue
)options.attachKeyListener
Boolean Whether or not to bind keyup events (optional, defaulttrue
)options.allButtonSelector
String Selector for view all button elementoptions.viewAllSelector
(optional, default'[data-ecl-gallery-all]'
)options.countSelector
(optional, default'[data-ecl-gallery-count]'
)options.attachResizeListener
(optional, defaulttrue
)
init
Initialise component.
destroy
Destroy component.
checkScreen
Check if current display is desktop or mobile
hideItems
Hide several gallery items by default
- 2 "lines" of items on desktop
- only 3 items on mobile
handleResize
Trigger events on resize Uses a debounce, for performance
updateOverlay
Parameters
selectedItem
HTMLElement Media element
handleKeyboard
Handles keyboard events such as Escape and navigation.
Parameters
e
Event
handleClickOnCloseButton
Invoke listeners for close events.
handleKeyPressOnItem
Invoke listeners for on pressing the spacebar button.
Parameters
e
Event
handleClickOnViewAll
Invoke listeners for on click events on view all.
Parameters
e
Event
handleClickOnItem
Invoke listeners for on click events on the given gallery item.
Parameters
e
Event
handleClickOnPreviousButton
Invoke listeners for on click events on previous navigation link.
handleClickOnNextButton
Invoke listeners for on click events on next navigation link.
autoInit
Parameters
root
HTMLElement DOM element for component instantiation and scope$1
Object (optional, default{}
)$1.GALLERY
(optional, default{}
)
Returns Gallery An instance of Gallery.
Setup
There are 2 ways to initialise the component.
Automatic
Add data-ecl-auto-init
attribute to component's markup
<section class="ecl-gallery" data-ecl-gallery data-ecl-auto-init="Gallery">
...
</section>
Use the ECL
library's autoInit()
(ECL.autoInit()
) when your page is ready or other custom event you want to hook onto.
Manual
Get target element, create an instance and invoke init()
.
Given you have 1 element with an attribute data-ecl-gallery
on the page:
var elt = document.querySelector('[data-ecl-gallery]');
var gallery = new ECL.Gallery(elt);
gallery.init();
`