Repository navigation
Gallery API
Murhaf Sousli edited this page Dec 22, 2023
·
55 revisions
Here is the list of inputs, outputs, and functions available in the GalleryComponent
| Name | Default | Description |
|---|---|---|
| [scrollBehavior] | smooth |
The transition behavior when the active item is changed |
| [navScrollBehavior] | smooth |
The transition behavior when the active item is nav is clicked |
| [imageSize] | cover |
Image size cover or contain
|
| [thumbImageSize] | cover |
Thumbnails image size cover or contain
|
| [thumbDetached] | false | De-attach thumbnails slider from scrolling when active item changes |
| [items] | [ ] | Load items array GalleryItem[]
|
| [loadingAttr] | lazy |
Set the loading attribute for img and iframe elements |
| [loadingStrategy] | default |
Set how items should load default, lazy and preload
|
| [slidingDirection] | horizontal |
Set sliding direction horizontal, vertical
|
|
|
||
|
|
||
| [loop] | true | loop for next() and prev() functions |
| [nav] | true | Show navigation buttons |
| [counter] | true | Show counter |
| [counterPosition] | top |
Counter position top or bottom
|
| [dots] | false | Show dots navigation |
| [dotsSize] | 30 | Dots size |
| [dotsPosition] | bottom |
Dots position top or bottom
|
| [thumb] | true | Show thumbnails navigation |
| [thumbMode] | strict |
Thumbnails sliding mode strict or free
|
| [thumbWidth] | 120 | Thumbnail width |
| [thumbHeight] | 90 | Thumbnail height |
| [thumbPosition] | bottom |
Thumbnails position top, left, right, bottom
|
| [thumbView] | default |
Thumbnails view default or contain
|
| [slidingDisabled] | false | Disable slider scrolling using touchpad / mobile panning |
| [slidingEase] | default ease func | The ease function used to scroll to active item / thumb |
| [slidingDuration] | 468 | The duration (ms) used to scroll to active item / thumb |
| [thumbSlidingDisabled] | false | Disable thumbnails scrolling using touchpad / mobile panning |
| [mouseSlidingDisabled] | false | Disable slider scrolling using mouse |
| [thumbMouseSlidingDisabled] | false | Disable thumbnails scrolling using mouse |
| [autoPlay] | false | Start slide show automatically |
| [autoHeight] | false | Set gallery height to active item height (only compatible with images) |
| [itemAutosize] | false | Allow each item to fit its image size (only compatible with images) |
| [thumbAutosize] | false | Allow each thumb to fit its image size |
| [playerInterval] | 3000 | Slide show interval |
| [disableThumb] | false | Disable Thumbnails clicks |
| [resizeDebounceTime] | 0 | The debounce time or delay in (ms) before adapting the gallery to the new size |
| [debug] | false | Display visuals to help debug the gallery |
| (indexChange) | Stream that emits when current index changes | |
| (itemsChange) | Stream that emits when items change | |
| (itemClick) | Stream that emits when an item is clicked | |
| (thumbClick) | Stream that emits when a thumbnail is clicked | |
| (error) | Stream that emits when an error occurs | |
| (playingChange) | Stream that emits when playing the slide show changes | |
| load(items) | Load new items and reset the state | |
| add(item, active?) | Add a new item to the gallery | |
| addImage(data, active?) | Add an image item to the gallery | |
| addVideo(data, active?) | Add a video item to the gallery | |
| addYoutube(data, active?) | Add a youtube item to the gallery | |
| addIframe(data, active?) | Add an iframe item to the gallery | |
| remove(index) | Remove an existing item by index | |
| set(index: number) | Set active item | |
| next() | Set next item | |
| prev() | Set prev item | |
| play(interval?) | Start the slide show | |
| stop() | Stop the slide show | |
| reset() | Reset gallery to initial state |
Use the GalleryRef to access and control a gallery, useful for the lightbox mode
| Name | Description |
|---|---|
| setConfig(config: GalleryConfig) | Set gallery config |
| load(items) | Load new items and reset the state |
| add(item, active?) | Add a new item to the gallery |
| addImage(data, active?) | Add an image item to the gallery |
| addVideo(data, active?) | Add a video item to the gallery |
| addYoutube(data, active?) | Add a youtube item to the gallery |
| addIframe(data, active?) | Add an iframe item to the gallery |
| remove(index) | Remove an existing item by index |
| set(index) | Set active item |
| next() | Set next item |
| prev() | Set prev item |
| reset() | Reset gallery to initial state |
| play(interval?) | Start the slide show |
| stop() | Stop the slide show |
| stateSnapshot. | A snapshot of the current gallery state |
| state$ | Stream that emits when gallery state changes |
| config$ | Stream that emits when gallery config changes |
| initialized | Stream that emits when gallery is initialised/reset |
| initialized | Stream that emits when gallery is initialised/reset |
| indexChanged | Stream that emits when current index is changed |
| itemsChanged | Stream that emits when loaded items index is changed |
| itemClick | Stream that emits when an item is clicked |
| thumbClick | Stream that emits when a thumbnail is clicked |
| playingChanged | Stream that emits when playing the slide show changes |
You can use to set the default config for all galleries.
GalleryModule.withConfig({
loop: true
})or for a specific gallery using the GalleryRef
const config: GalleryConfig = {
autoPlay: true
};
galleryRef.setConfig(config)Here are the available options in GalleryConfig
| Name | Default | Description |
|---|---|---|
| scrollBehavior | smooth |
The transition behavior when the active item is changed |
| navScrollBehavior | smooth |
The transition behavior when the active item is nav is clicked |
| imageSize | cover |
Image size cover or contain
|
| thumbImageSize | cover |
Thumbnails image size cover or contain
|
| thumbDetached | false | De-attach thumbnails slider from scrolling when active item changes |
| loadingAttr | lazy |
Set the loading attribute for img and iframe elements |
| loadingStrategy | default |
Set how items should load default, lazy and preload
|
| slidingDirection | horizontal |
Set sliding direction horizontal, vertical
|
| loop | false | loop for next() and prev() functions |
| counter | true | Show counter |
| counterPosition | top |
Counter position top or bottom
|
| nav | true | Show next and prev navigation |
| dots | false | Show dots navigation |
| dotsSize | 30 | Dots size |
| dotsPosition | bottom |
Dots position top or bottom
|
| thumb | true | Show thumbnails navigation |
| thumbWidth | 120 | Thumbnail width |
| thumbHeight | 90 | Thumbnail height |
| thumbPosition | bottom |
Thumbnails position top, left, right, bottom
|
| thumbView | default |
Thumbnails view default or contain
|
| thumbMode | strict |
Thumbnails sliding mode strict or free
|
| disableThumb | false | Disable Thumbnails clicks |
| slidingDisabled | false | Disable slider scrolling using touchpad / mobile panning |
| thumbSlidingDisabled | false | Disable thumbnails scrolling using touchpad / mobile panning |
| mouseSlidingDisabled | false | Disable slider scrolling using mouse |
| thumbMouseSlidingDisabled | false | Disable thumbnails scrolling using mouse |
| autoPlay | false | Start slide show automatically |
| autoHeight | false | Set gallery height to active item height (only compatible with images) |
| itemAutosize | false | Allow each item to fit its image size (only compatible with images) |
| thumbAutosize | false | Allow each thumb to fit its image size |
| resizeDebounceTime | 0 | The debounce time or delay in (ms) before adapting the gallery to the new size |
| playerInterval | 3000 | Slide show interval |
| slidingEase | default ease func | The ease function used to scroll to active item / thumb |
| slidingDuration | 468 | The duration (ms) used to scroll to active item / thumb |
| debug | false | Display visuals to help debug the gallery |
| navIcon | default icon | An inline SVG data for the next and prev navigation |
| loadingIcon | default icon | An inline SVG data for the image loader icon |
| thumbLoadingIcon | default icon | An inline SVG data for the thumb loader icon |
| loadingError | Error template to display when image fail to load | |
| thumbLoadingError | Error template to display when thumb fail to load | |
| itemTemplate | Custom template that overrides any type of item template | |
| imageTemplate | Custom template to extend image templates | |
| thumbTemplate | Custom template to extend thumb templates | |
| boxTemplate | Custom template to display a static overlay over items |
| Name | Description |
|---|---|
| ref(id?) | Get GalleryRef by id |
| hasRef(id?) | Check if a reference exists |
| resetAll() | Reset all gallery instances |
| destroy(id?) | Destroy gallery instance by Id |
| destroyAll() | Destroy all galleries instances |
