Configurations¶
Look and feel¶
Parameters that affect the overall look and feel of the gallery
Name |
Type |
Default |
Description |
|---|---|---|---|
galleryWidth |
Number |
900 |
Gallery width |
galleryHeight |
Number |
500 |
Gallery height |
bgColor |
String |
‘#333’ |
Gallery background color |
preload |
Number |
5 |
Number of preloaded items |
segment |
String |
‘5:5’ |
Segmentation in format of rows:columns |
preset |
Number |
0 |
Transition preset, available value 0 or 1 |
boxThickness |
Number |
10 |
Item box geometry thickness |
rightColor |
String |
‘#999999’ |
Right side color of the segment box |
leftColor |
String |
‘#999999’ |
Left side color of the segment box |
topColor |
String |
‘#999999’ |
Top side color of the segment box |
bottomColor |
String |
‘#999999’ |
Bottom side color of the segment box |
Animation¶
Common variables used in tweening engine
Name |
Type |
Default |
Description |
|---|---|---|---|
easing |
String |
‘easeOutQuad’ |
animejs easing equation |
duration |
Number |
800 |
animejs tweening duration |
frontImageDuration |
Number |
1200 |
Duration of front image |
transitionInDuration |
Number |
1200 |
Transition in duration |
transitionInEasing |
String |
‘easeOutQuint’ |
Transition in easing |
transitionOutDuration |
Number |
1200 |
Transition out duration |
transitionOutEasing |
String |
‘easeOutQuad’ |
Transition out easing |
Interaction¶
Options to customize app interactions including mouse, keyboard and autoplay
Name |
Type |
Default |
Description |
|---|---|---|---|
useKeyboard |
Boolean |
true |
Enable or disable keyboard |
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 |
wAudioPlayer¶
Options to customize wave audio player
Name |
Type |
Default |
Description |
|---|---|---|---|
padding |
Number |
80 |
Padding around wave audio player |
wavesurfer |
Object |
{progressColor:’#fff’, waveColor:’#555’} |
Option pass to wavesurfer object |
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], [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 looping mode |
targetLink |
String |
‘_blank’ |
The target of embedded link |