Gallery

API

Gallery

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options 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, default true)
  • options.attachKeyListener Boolean Whether or not to bind keyup events (optional, default true)
  • options.allButtonSelector String Selector for view all button element
  • options.viewAllSelector (optional, default '[data-ecl-gallery-all]')
  • options.countSelector (optional, default '[data-ecl-gallery-count]')
  • options.attachResizeListener (optional, default true)

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();
`