Configurations¶
Look and feel¶
Parameters that affect the overall look and feel of the gallery
Name |
Type |
Default |
Description |
|---|---|---|---|
sphereRadius |
Number |
1500 |
Spherical radius |
hAngleSegment |
Number |
24 |
Number of horizontal segment |
vAngleSegment |
Number |
15 |
Number of vertical segment |
itemExtrude |
Number |
400 |
The extruded degree of a focused item |
constraint |
Number |
300 |
Contraint dimension |
boxThickness |
Number |
2 |
Item thickness |
Back image |
String |
null |
Path to texture image used in item’s back side |
containerZ |
Number |
-2500 |
Default gallery position in z axis |
force2d |
Boolean |
false |
Auto use 2d gallery mode |
Animation¶
Common variables used in tweening engine
Name |
Type |
Default |
Description |
|---|---|---|---|
easing |
String |
‘easeOutQuad’ |
animejs easing equation |
duration |
Number |
800 |
animejs tweening duration |
itemTweenInMaxDelay |
Number |
1500 |
Item transition in parameter |
itemTweenInDelayFactor |
Number |
1 |
Item transition in parameter |
itemTweenInDuration |
Number |
800 |
Item transition in parameter |
itemTweenInEasing |
String |
‘easeOutQuint’ |
Item transition in parameter |
itemTweenOutDuration |
Number |
800 |
Item transition out parameter |
itemTweenOutEasing |
Number |
‘easeOutQuint’ |
Item transition out parameter |
extrudeDuration |
Number |
2000 |
Extruding transition parameter |
extrudeEasing |
String |
‘easeOutBounce’ |
Extruding transition parameter |
targetDuration |
Number |
1200 |
Targeting phase transition parameter |
targetEasing |
String |
‘easeOutQuint’ |
Targeting phase transition parameter |
returnDuration |
Number |
1200 |
Returning phase transition parameter |
returnEasing |
String |
‘easeOutQuint’ |
Returning phase transition parameter |
Interaction¶
Options to customize app interactions including mouse, keyboard and autoplay
Name |
Type |
Default |
Description |
|---|---|---|---|
control |
String |
‘mousemove’ |
Mouse mode: ‘mousemove’ or ‘mousedrag’ |
useMousewheel |
Boolean |
true |
Enable zooming with mouse wheel |
mouseSpeedX |
Number |
1 |
Horizontal mouse speed |
mouseSpeedY |
Number |
1 |
Vertical mouse speed |
zoomAmount |
Number |
500 |
Zooming amount on scrolling wheel |
minZ |
Number |
-1000 |
Minimum zooming position |
maxZ |
Number |
2000 |
Maximum zooming position |
mouseDragSpeed |
Number |
0.05 |
Mouse dragging speed |
tintColor |
String |
‘#333333’ |
Tint color applied on unfocused items |
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 |
[1, 2] |
Specify extra components to be used with the main gallery, possible values |
categoryMenu |
Object |
{horizontal:false} |
Category menu setting |
tooltip |
Object |
{enabled:true} |
Tooltip setting |
Miscellaneous¶
Other configurations
Name |
Type |
Default |
Description |
|---|---|---|---|
useFullscreen |
Boolean |
true |
Enable or disable fullscreen feature |
responsive |
Object |
{XS:-1200, SM:-650, MD:-350, LG:0, XL:0} |
Responsive parameters, gallery z position responses to different screen sizes. |