==============
Configurations
==============

Look and feel
-------------
Parameters that affect the overall look and feel of the gallery

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

   * - Name
     - Type
     - Default
     - Description
   * - minDistance
     - Number
     - 500
     - Closest z position an item can occupy
   * - maxDistance
     - Number
     - 4000
     - Furthest z position an item can occupy
   * - viewAngle
     - Number
     - -0.25
     - Camera view angle, controls how direct or sideway the eye views the gallery
   * - flipAngle
     - Number
     - -45
     - Controls the flipping degree of an item from floating state to center state
   * - rotationAngle
     - Number
     - 0
     - Maximum rotation degrees of an item around its local z axis 
   * - speed
     - Number
     - 3
     - Gallery scrolling speed
   * - maxSpeed
     - Number
     - 40
     - Maximum scrolling speed 
   * - constraint
     - Number
     - 600
     - Maximum constraint applied to each item width and height
   * - friction
     - Number
     - 0.1
     - Negative acceleration applied to scrolling speed per time differential
   * - fitRatio
     - Number
     - 0.85
     - Fit ratio applied to a center front item
   * - scaleToFit
     - String
     - "smart"
     - Control the item scaling behaviour when it is brought to center front. Possible value: "always", "none", "smart".
   * - orientation
     - String
     - "horizontal"
     - Photo flow direction
   * - keepFloating
     - Boolean
     - true
     - When an item is brought to center front, control the floating state of remaining items
   * - boxThickness
     - Number
     - -1
     - The thicknes of each 3D box using the photo item as its texture. -1 value disable box thickness
   * - categoryMenu
     - Object
     - {horizontal:false}
     - Configuration for CategoryMenu, wherether to use horizontal or vertical mode
   * - 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

Interaction
-----------

Options to customize app interactions including mouse and keyboard

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

   * - Name
     - Type
     - Default
     - Description
   * - useMouseDrag
     - Boolean
     - false
     - Enable or disable mouse dragging (disabled on mobile devices)
   * - mouseDragSpeed
     - Number
     - 0.05
     - Mouse dragging speed
   * - useKeyboard
     - Boolean
     - true
     - Enable or disable keyboard


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 1 as ItemTitle, 2 as ItemDescription

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


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