Configurations

Look and feel

Parameters that affect the overall look and feel of the gallery

Name	Type	Default	Description
normalSize	Number	300	Constraint height applied to each item
markupWidth	Number	500	Constraint width of markup item
markupHeight	Number	300	Constraint height of markup item
itemDistance	Number	100	Distance between item
viewAngleX	Number	0	Rotation angle of each item in horizontal axis
shearAngle	Number	45	The maximum shear angle of the camera when moving between items
useReflection	Boolean	true	Enable or disable reflection
refParams	Array	[0, 0.55, 0.5, 0.15, 0.8, 0]	Reflection parameters in the format of [positon, opacity, positon, opacity…]
refDistance	Number	0	Distance between item and its reflection
roundCorner	Number	8	CSS border-radius applied to each item
ovalShape	Boolean	false	Apply a value of ‘50%’ to roundCorner option
borderStyle	String	undefined	Border CSS style applied to each item
itemShadow	String	undefined	Box-shadow CSS style applied to each item
force2d	Boolean	false	Auto use 2d gallery mode
categoryMenu	Object	{horizontal:false}	Configuration for CategoryMenu, wherether to use horizontal or vertical mode

Animation

Common variables used in tweening engine

Name	Type	Default	Description
easing	String	‘easeOutQuad’	animejs easing equation
duration	Number	800	animejs tweening duration
shiftEasing	Number	0.025	Shifting easing
rotateEasing	Number	0.065	Rotating easing

Interaction

Options to customize app interactions including mouse, keyboard and autoplay

Name	Type	Default	Description
useButtonNavigator	Boolean	true	Enable or disable button navigators
useKeyboard	Boolean	true	Enable or disable keyboard
useMousewheel	Boolean	true	Enable or disable mousewheel
useMouseDrag	Boolean	false	Enable or disable mouse dragging (disabled on mobile devices)
mouseDragSpeed	Number	0.05	Mouse dragging speed
mouseCam	Boolean	false	Enable or disable mouse camera(moving mouse left and right to auto change viewAngle)
useAutoplay	Boolean	false	Enable or disable autoplay function
autoPlayDuration	Number	3000	Duration to wait between each item in milliseconds
autoPlayFrontColor	String	‘#eee’	The front circle color of autoplay button
autoPlayBackColor	String	‘#333’	The background circle color of autoplay button
openStyle	Number	0	Value can be either 0 or 1, customize the unfolding animation for each category

Media Viewer

Media Viewer options

Name	Type	Default	Description
containerWidth	Number	600	The general container width for inline, ajax and embedded content
containerHeight	Number	350	The general container height for inline, ajax and embedded content
scaleFactor	Number	0.8	The scale factor that is applied to extended content if the item is larger than current viewport
showDuration	Number	900	Duration for fading in effect of modal dialog
hideDuration	Number	350	Duration for fading out effect of modal dialog
maxVisibleThumbnail	Number	12	Maximum thumbnail visible in thumbnail bar
thumbnailSize	Number	40	Thumbnail width and height
easing	String	‘easeOutQuint’	General easing equation
ajaxProcessor	Function	function(con, req) { con.innerText = req.responseText}	The Ajax function that will be called each time an ajax request is loaded
audioPlayerOpt	Object	{see Audio Player Opt}	Options for the audio player
videoPlayerOpt	Object	{see Video Player Opt}	Options for the video player

Audio Player Opt

Audio Player options

Name	Type	Default	Description
width	Number	300	The player width
height	Number	200	The player height
visual	Boolean	true	Enable or disable visualization
visualBg	String	‘#333333’	Visualization background color
visualColor	String	‘#ffff00’	Visualization color

Video Player Opt

Video Player options

Name	Type	Default	Description
width	Number	500	The player width
height	Number	350	The player height
id	String	mvVideoPlayer	The player id
dataSetup	Object	{}	dataSetup object that is passed to videojs function

Gallery2d

Gallery2d fallback options

Name	Type	Default	Description
distance	Number	200	Distance between each item
borderStyle	String	‘6px solid white’	CSS border style applied to each item
minScale	Number	0.5	Minimum scale factor
maxScale	Number	1	Maximum scale factor
loop	Boolean	false	Looping control, use with next and prev API methods
rangeCount	Number	3	Number of items around center item that will be affect by scale factor
easing	String	‘easeOutQuad’	animejs easing equation
duration	Number	2000	animejs tweening duration
roundCorner	Number	8	CSS border-radius applied to each item
circleShape	Boolean	false	CSS border-radius = 50%
itemShadow	String	‘0px 10px 15px 5px #222’	CSS box-shadow property applied to each item
responsive	Object	{XS:0.7, SM:0.75, MD:0.85, LG:1, XL:1}	The responsive parameters, a scale factor will be applied to the gallery depending on current screen size

Components

Additional components setup with 0 as ButtonList, 1 as ItemTitle, 2 as ItemDescription, 3 as Scrollbar

Name	Type	Default	Description
components	Array	[0, 1, 2]	Specify extra components to be used with the main gallery, possible values: [], [0], [1], [2], [1, 2], [0, 1], [0, 2], [0, 1, 2]

Miscellaneous

Other configurations

Name	Type	Default	Description
useFullscreen	Boolean	true	Enable or disable fullscreen feature
origins	Array	[50, 50]	Gallery origins in percentage
loop	Boolean	false	Enable loop mode
targetLink	String	‘_blank’	Control the target of external link