Configurations¶
Look and feel¶
Parameters that affect the overall look and feel of the gallery
Name |
Type |
Default |
Description |
|---|---|---|---|
normalHeight |
Number |
300 |
Constraint height applied to each item |
markupWidth |
Number |
500 |
Constraint width of mark up item |
markupHeight |
Number |
300 |
Constraint height of mark up item |
shiftGuard |
Number |
20 |
Guard distance applied before next item is revealed, use with useItemDrag |
onItemDragLiftDistance |
Number |
50 |
The lift distance used when a drag action begins |
randomRotationZ |
Number |
0 |
The maxium random rotation in Z axis |
itemDistance |
Number |
100 |
Distance between items in Z axis |
shiftDistance |
Number |
800 |
The amount of distance that an item will be shipped away to reveal items behind |
shiftMode |
String |
‘left’ |
Shifting Mode, possible values: left, right, top, bottom, leftRight, topBottom, spiral, spiralReverse, spiralUp, spiralUpReverse, reveal, revealReverse, toSide, toSideReverse, flip |
autoSorted |
Boolean |
false |
Auto sort items with respect to their width |
viewAngleX |
Number |
0 |
The camera shear angle in horizontal axis |
viewAngleY |
Number |
0 |
The camera shear angle in vertical axis |
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 |
openDuration |
Number |
3000 |
Transition duration when opening a category |
closeDuration |
Number |
1500 |
Transition duration when closing a category |
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) |
useItemDrag |
Boolean |
false |
Enable or disable item dragging |
mouseDragSpeed |
Number |
0.05 |
Mouse dragging speed |
mouseCam |
Boolean |
false |
Enable or disable mouse camera(moving mouse left and right to auto change viewAngle) |
mouseCamAngle |
Number |
30 |
Maxium rotation angle of camera using with mouseCam |
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 |
loop |
Boolean |
false |
Allow the gallery to target the first item when it passed the last item and vice versa |
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 |
ovalShape |
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], [3], [1, 2], [1, 3], [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’ |
Target of embedded link |