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
   * - 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

.. 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

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
   * - 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

.. 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: [], [1], [2], [1, 2]
   * - 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
   * - origins
     - Array
     - [50, 50]
     - Gallery origins in percentage
   * - targetLink
     - String
     - '_blank'
     - The target of embedded link