Gallery API

• Gallery Component API
• GalleryRef API
• Gallery Config API
• Gallery Service API

Gallery Component API

Here is the list of inputs, outputs, and functions available in the GalleryComponent

Name	Default	Description
fluid		Full screen width gallery (an attribute not an input)
[imageSize]	cover	Image size cover or contain
[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
[itemTemplate]		Custom item template (removed in >= v11)
[thumbTemplate]		Custom thumbnail template (removed in >= v11)
[gestures]	true	Use touch events (requires hammer.js)
[loop]	true	loop for next() and prev() functions
[panSensitivity]	25	Sliding sensitivity
[zoomOut]	0	Zoom out of the main slider
[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
[autoPlay]	false	Start slide show automatically
[autoHeight]	false	Set gallery height to active item height (only compatible with images)
[playerInterval]	3000	Slide show interval
[disableThumb]	false	Disable Thumbnails clicks
[reserveGesturesAction]	false	Prevent mobile browser from scrolling while user is sliding 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

GalleryRef API

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

Gallery Config API

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
gestures	true	Use touch events (require hammer.js)
reserveGesturesAction	false	Prevent mobile browser from scrolling while user is sliding the gallery
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
panSensitivity	25	Sliding sensitivity
zoomOut	0	Zoom out of the main slider
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
autoPlay	false	Start slide show automatically
autoHeight	false	Set gallery height to active item height (only compatible with images)
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		Error template to display when image 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

Gallery Service API

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