-
Notifications
You must be signed in to change notification settings - Fork 129
Config API v8
Murhaf Sousli edited this page Dec 4, 2022
·
3 revisions
Here is the list of inputs, outputs, and functions available in the GalleryComponent
| Name | Default | Description |
|---|---|---|
| [imageSize] | cover |
Image size cover or contain
|
| [items] | [ ] | Load items array GalleryItem[]
|
| [loadingStrategy] | default |
Set how items should load default, lazy and preload
|
| [slidingDirection] | horizontal |
Set sliding direction horizontal, vertical
|
| [itemTemplate] | null | Custom item template |
| [thumbTemplate] | null | Custom thumbnail template |
| [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 |
| [thumbWidth] | 120 | Thumbnail width |
| [thumbHeight] | 90 | Thumbnail height |
| [thumbPosition] | bottom |
Thumbnails position top, left, right, bottom
|
| [thumbView]. | default |
Thumbnails view default or contain
|
| [autoPlay] | false | Start slide show automatically |
| [playerInterval] | 3000 | Slide show interval |
| [disableThumb] | false | Disable Thumbnails clicks |
| (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 |
|---|---|---|
| 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
|
| disableThumb | false | Disable Thumbnails clicks |
| autoPlay | false | Start slide show automatically |
| playerInterval | 3000 | Slide show interval |
| 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 |
| loadingError | null | Error template to display when image fail to load |
| 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 |