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 |