Configurations¶

Look and feel¶

Parameters that affect the overall look and feel of the gallery

Name	Type	Default	Description
minDistance	Number	500	Closest z position an item can occupy
maxDistance	Number	4000	Furthest z position an item can occupy
viewAngle	Number	-0.25	Camera view angle, controls how direct or sideway the eye views the gallery
flipAngle	Number	-45	Controls the flipping degree of an item from floating state to center state
rotationAngle	Number	0	Maximum rotation degrees of an item around its local z axis
speed	Number	3	Gallery scrolling speed
maxSpeed	Number	40	Maximum scrolling speed
constraint	Number	600	Maximum constraint applied to each item width and height
friction	Number	0.1	Negative acceleration applied to scrolling speed per time differential
fitRatio	Number	0.85	Fit ratio applied to a center front item
scaleToFit	String	“smart”	Control the item scaling behaviour when it is brought to center front. Possible value: “always”, “none”, “smart”.
orientation	String	“horizontal”	Photo flow direction
keepFloating	Boolean	true	When an item is brought to center front, control the floating state of remaining items
boxThickness	Number	-1	The thicknes of each 3D box using the photo item as its texture. -1 value disable box thickness
categoryMenu	Object	{horizontal:false}	Configuration for CategoryMenu, wherether to use horizontal or vertical mode
force2d	Boolean	false	Auto use 2d gallery mode

Common variables used in tweening engine

Name	Type	Default	Description
easing	String	‘easeOutQuad’	animejs easing equation
duration	Number	800	animejs tweening duration

Options to customize app interactions including mouse and keyboard

Name	Type	Default	Description
useMouseDrag	Boolean	false	Enable or disable mouse dragging (disabled on mobile devices)
mouseDragSpeed	Number	0.05	Mouse dragging speed
useKeyboard	Boolean	true	Enable or disable keyboard

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

Additional components setup with 1 as ItemTitle, 2 as ItemDescription

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

Other configurations

Name	Type	Default	Description
useFullscreen	Boolean	true	Enable or disable fullscreen feature
origins	Array	[50, 50]	Gallery origins in percentage