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

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

.. list-table:: 
   :widths: 25 25 25 50
   :header-rows: 1

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

.. list-table:: 
   :widths: 25 25 25 50
   :header-rows: 1

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

.. 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], [3], [1, 2], [1, 3], [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 looping mode
   * - targetLink
     - String
     - '_blank'
     - The target of embedded link