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 * - normalHeight - Number - 300 - Constraint height applied to each item * - markupWidth - Number - 500 - Constraint width of mark up item * - markupHeight - Number - 300 - Constraint height of mark up item * - shiftGuard - Number - 20 - Guard distance applied before next item is revealed, use with useItemDrag * - onItemDragLiftDistance - Number - 50 - The lift distance used when a drag action begins * - randomRotationZ - Number - 0 - The maxium random rotation in Z axis * - itemDistance - Number - 100 - Distance between items in Z axis * - shiftDistance - Number - 800 - The amount of distance that an item will be shipped away to reveal items behind * - shiftMode - String - 'left' - Shifting Mode, possible values: left, right, top, bottom, leftRight, topBottom, spiral, spiralReverse, spiralUp, spiralUpReverse, reveal, revealReverse, toSide, toSideReverse, flip * - autoSorted - Boolean - false - Auto sort items with respect to their width * - viewAngleX - Number - 0 - The camera shear angle in horizontal axis * - viewAngleY - Number - 0 - The camera shear angle in vertical axis * - 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 * - roundCorner - Number - 8 - CSS border-radius applied to each item * - ovalShape - Boolean - false - Apply a value of '50%' to roundCorner option * - borderStyle - String - undefined - Border CSS style applied to each item * - itemShadow - String - undefined - Box-shadow CSS style applied to each item * - force2d - Boolean - false - Auto use 2d gallery mode * - categoryMenu - Object - {horizontal:false} - Configuration for CategoryMenu, wherether to use horizontal or vertical 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 * - openDuration - Number - 3000 - Transition duration when opening a category * - closeDuration - Number - 1500 - Transition duration when closing a category 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 * - useButtonNavigator - Boolean - true - Enable or disable button navigators * - useKeyboard - Boolean - true - Enable or disable keyboard * - useMousewheel - Boolean - true - Enable or disable mousewheel * - useMouseDrag - Boolean - false - Enable or disable mouse dragging (disabled on mobile devices) * - useItemDrag - Boolean - false - Enable or disable item dragging * - mouseDragSpeed - Number - 0.05 - Mouse dragging speed * - mouseCam - Boolean - false - Enable or disable mouse camera(moving mouse left and right to auto change viewAngle) * - mouseCamAngle - Number - 30 - Maxium rotation angle of camera using with mouseCam * - useAutoplay - Boolean - false - Enable or disable autoplay function * - autoPlayDuration - Number - 3000 - Duration to wait between each item in milliseconds * - autoPlayFrontColor - String - '#eee' - The front circle color of autoplay button * - autoPlayBackColor - String - '#333' - The background circle color of autoplay button * - loop - Boolean - false - Allow the gallery to target the first item when it passed the last item and vice versa 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 * - ovalShape - 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 loop mode * - targetLink - String - '_blank' - Target of embedded link