1. Components

Optionally pick the component to be used in the app. They are ItemTitle, ItemDescription specify the variable like so:
Option Value Description
components [] Disable all components
components [1] ItemTitle
components [2] ItemDescription

2. Controls

There are 2 mouse modes to control the gallery. "mousemove" auto rotates the gallery on mouse changing position, "mousedrag" enables dragging gestures to manually rotate the gallery. The "useMousewheel" option enables gallery zooming function using mousewheel button.
Option Defaultfalse Description
control 'mousemove' / 'mousedrag' Mouse control mode
mouseSpeedX / mouseSpeedY 1 Mouse moving or dragging speed
useMousewheel true Enable zooming with mouse wheel

3. Animation

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

4. Look and feel

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.

5. Media Viewer

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