Configurations
==============
Look and feel
-------------
Parameters that affect the overall look and feel of the gallery
.. list-table::
:widths: 30 25 25 50
:header-rows: 1
* - Name
- Type
- Default
- Description
* - normalHeight
- Number
- 300
- Constraint height applied to each item
* - markupWidth
- Number
- 500
- Constraint width of markup item
* - markupHeight
- Number
- 300
- Constraint height of markup item
* - shiftDistance
- Number
- 150
- The amount of distance that center item will be shifted forward or backward
* - viewAngleX
- Number
- 0
- The camera shear angle in horizontal axis
* - carouselRadius
- Number
- 600
- The carousel radius
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - Name
- Type
- Default
- Description
* - easing
- String
- 'easeOutQuad'
- animejs easing equation
* - duration
- Number
- 800
- animejs tweening duration
* - openDuration
- Number
- 2000
- 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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)
* - 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
* - 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
* - openStyle
- Number
- 0
- Value can be either 0 or 1, customize the unfolding animation for each category
Media Viewer
------------
Media Viewer options
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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 :ref:`Audio Player Opt`}
- Options for the audio player
* - videoPlayerOpt
- Object
- {see :ref:`Video Player Opt`}
- Options for the video player
Audio Player Opt
----------------
Audio Player options
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - Name
- Type
- Default
- Description
* - components
- Array
- [0, 1, 2]
- Specify extra components to be used with the main gallery, possible values: [], [0], [1], [2], [1, 2], [0, 1], [0, 2], [0, 1, 2]
Miscellaneous
-------------
Other configurations
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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