Optionally pick the component to be used in the app. They are ButotnList, ItemTitle, ItemDescription and Scrollbar, specify the variable like so:

Option	Value	Description
components	[]	Disable all components
components	[0, 1, 2, 3]	ButtonList, ItemTitle, ItemDescription and Scrollbar
components	[0]	ButtonList
components	[1]	ItemTitle
components	[2]	ItemDescription
components	[3]	Scrollbar

Common input controls including mouse and keyboard are well supported. In item mode pressing Right and Left arrow key will switch the gallery to the next and previous item. The "useMousewheel" option enables browsing the gallery with the mouse wheel. The "useDrag" option enables browsing by dragging mouse button across the interactive area.

Option	Defaultfalse	Description
useKeyboard	true	Enable or disable keyboard
useMousewheel	true	Enable or disable mouse wheel function
useDrag	false	Enable or disable mouse dragging
mouseDragSpeed	0.05	Mouse dragging speed

anime.js is used as the core tweening engine. The application exposes two most common tweening variables "easing" and "duration", further customization and development can be implemented by tweaking the source code.

Option	Default	Description
easing	'easeOutQuint'	animejs easing equation
duration	2000	animejs tweening duration

A default dark theme and light theme are provided in download package. Simply pick ".light.css" for light theme or ".css" for dark theme to use in your project. Our development environment implements SASS and Compass framework to modularize the code base into visual related sections.

To present the item in its rich media form, Media Viewer creates a modal dialog and provide common usages to browse through the gallery. Several variables are available to customize the main component and sub components like Audio Player and Video Player.

Option	Default	Description
containerWidth	600	The general container width for inline, ajax and embedded content
containerHeight	350	The general container height for inline, ajax and embedded content
scaleFactor	0.8	The general container height for inline, ajax and embedded content
showDuration	900	Duration for fading in effect of modal dialog
hideDuration	350	Duration for fading out effect of modal dialog
maxVisibleThumbnail	12	Maximum thumbnail visible in thumbnail bar
thumbnailSize	40	Thumbnail width and height
easing	easeOutQuint	General easing equation
ajaxProcessor	function(con, req) { con.innerText = req.responseText	The Ajax function that will be called each time an ajax request is loaded