Creates a gallery layer view out of nested hylo-responsive-image components.

Each hylo-responsive-image component which is wrapped by this component and has hylo-image components as child elements which are marked for "gallery" use will be part of the gallery layer.

The gallery layer will open when clicked on one of these hylo-responsive-image components.

When the layer gets closed, the last element having the focus before the layer opened will gain the focus again. You can prevent elements to be considered for the returning focus by giving it or one of its ancestors the css class "hylo-skip-last-focus".

Slots:

  • close: alternative content for the close button
  • prev: alternative content for the previous button
  • next: alternative content for the next button

Properties

announcementClosed: string = 'Galerie geschlossen'

The text announced when the gallery got closed.

Its hylo-page-root translations object key is "galleryAnnouncementClosed".

announcementDelay: number = 500

The delay of the announcement in millisecond.

announcementElement: string | HTMLHyloAccessibilityAnnouncementElement

An HTMLHyloAccessibilityAnnouncementElement component either as element or css query selection. If not set and hylo-page-root is present, it takes the announcement element from the hylo-page-root component.

Used to announce opened or closed status. "announcementOpened" and/or "announcementClosed" needs to be set.

announcementOpened: string = 'Galerie geöffnet'

The text announced when the gallery got opened.

Its hylo-page-root translations object key is "galleryAnnouncementOpened".

buttonClassClose: string = ''

Classes added to the close hylo-button.

buttonClassNext: string = ''

Classes added to the next hylo-button.

buttonClassPrev: string = ''

Classes added to the previous hylo-button.

buttonInsideClassClose: string = ''

Classes added to the button element inside the close hylo-button.

buttonInsideClassNext: string = ''

Classes added to the button element inside the next hylo-button.

buttonInsideClassPrev: string = ''

Classes added to the button element inside the previous hylo-button.

buttonLabelClose: string = 'Galerie schließen'

Label of the close button.

Its hylo-page-root translations object key is "galleryButtonLabelClose".

buttonLabelNext: string = 'Zum nächsten Galerie Element wechseln'

Label of the next button.

Its hylo-page-root translations object key is "galleryButtonLabelNext".

buttonLabelPrev: string = 'Zum vorherigen Galerie Element wechseln'

Label of the previous button.

Its hylo-page-root translations object key is "galleryButtonLabelPrev".

disableAutoOpen: boolean | "click" | "key"

Disables the automatic opening of the gallery if clicked or key pressed ("spacebar" or "enter") on the overview/initial image.

Can be set as boolean or "click" | "key" to only disable on "click" or "key" event.

disableNavigationTabFocus: boolean

Prevents the next and previous button to be reachable by the tab key.

Should be set if the slides itself are made tabbable.

enableSlidesTabFocus: boolean

Enables slides to be reachable by the tab key.

Hylo media players are always reachable by the tab key.

galleryLabel: string = 'Galerie'

Label of the gallery view layer.

galleryLabelEnd: string = 'Ende der Galerie. Zum Anfang der Galerie springen'

Label of the end marker of the gallery view layer.

galleryLabelStart: string = 'Galerie Anfang'

Label of the start marker of the gallery view layer.

hideButtons: boolean

If set, the buttons disappear if no user interaction.

hideButtonsTimeout: number = 3000

Sets the timeout in milliseconds after the buttons disappear.

pager: boolean = false

If true, show the pagination.

type: "scroll" | "slider" = 'slider'

The type of the gallery.

Methods

  • Closes the gallery view layer.

    Returns Promise<void>

  • Opens the gallery view layer.

    Returns Promise<void>

Generated using TypeDoc