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
* - 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
.. 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
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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
.. 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
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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
.. list-table::
:widths: 25 25 25 50
:header-rows: 1
* - 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.