Configurations¶
Look and feel¶
Parameters that affect the overall look and feel of the gallery
Name |
Type |
Default |
Description |
|---|---|---|---|
constraint |
Number |
300 |
Constraint height applied to each item |
mode |
String |
flat |
Carousel mode can be either ‘flat’, ‘outward’, ‘inward’, ‘flip’ |
carouselRadius |
Number |
1400 |
Carousel radius |
verticalShift |
Number |
-150 |
Carousel vertical shifting from center |
tiltAngle |
Number |
0 |
Carousel tilt angle |
range |
Number |
4 |
Number of items being affect on each side in carousel “flip” mode |
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 |
startingRotationX |
Number |
20 |
Starting rotation angle in X axis |
startingRotationY |
Number |
60 |
Starting rotation angle in Y axis |
boxThickness |
Number |
10 |
Item box geometry thickness |
containerZ |
Number |
-1800 |
Container position in Z axis |
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 |
Interaction¶
Options to customize app interactions including mouse, keyboard and autoplay
Name |
Type |
Default |
Description |
|---|---|---|---|
useKeyboard |
Boolean |
true |
Enable or disable keyboard |
useMousewheel |
Boolean |
true |
Enable or disable mousewheel |
useDrag |
Boolean |
false |
Enable or disable mouse dragging |
mouseDragSpeed |
Number |
0.05 |
Mouse dragging speed |
useAutoplay |
Boolean |
false |
Enable or disable autoplay |
autoPlayDuration |
Number |
4000 |
Autoplaying duration |
autoPlayFrontColor |
String |
‘#eee’ |
Front color of the autoplay button |
autoPlayFrontColor |
String |
‘#eee’ |
Front color of the autoplay button |
autoPlayBackColor |
String |
‘#3333’ |
Back color of the autoplay button |
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: [], [1], [2], [1, 2] |
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 |
origins |
Array |
[50, 50] |
Gallery origins in percentage |
targetLink |
String |
‘_blank’ |
The target of embedded link |