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
   * - orientation
     - String
     - 'vertical'
     - Can be 'horizontal' or 'vertical'
   * - vSegmentDistance
     - Number
     - 200
     - Spiral parameters
   * - hSegmentDistance
     - Number
     - 20
     - Spiral parameters
   * - repetition
     - Number
     - 10
     - Spiral parameters
   * - radius
     - Number
     - 1200
     - Spiral parameters
   * - itemExtrude
     - Number
     - 400
     - The pushed out distance when an item is targeted
   * - boxThickness
     - Number
     - 10
     - Item box geometry thickness
   * - backImage
     - String
     - null
     - Link to back image texture
   * - containerZ
     - Number
     - -1200
     - Container starting position in Z axis
   * - tintColor
     - String
     - '#333333'
     - Tint color applied to background items

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
   * - useKeyboard
     - Boolean
     - true
     - Enable or disable keyboard
   * - useMousewheel
     - Boolean
     - true
     - Enable or disable mousewheel
   * - control
     - String
     - 'mousedrag'
     - Can be 'mousedrag' or 'mousemove'
   * - mouseDragSpeed
     - Number
     - 0.05
     - Mouse dragging speed
   * - zoomAmount
     - Number
     - 500
     - Zooming amount on each stp
   * - minZ
     - Number
     - -1000
     - Minimum zooming distance
   * - maxZ
     - Number
     - 2000
     - Maximum zooming distance

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
     - [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'
     - The target of embedded link