1. Components
Optionally pick the component to be used in the app. They are ButtonList, ItemTitle, ItemDescription:
Option | Value | Description |
---|---|---|
components | [] | Disable all components |
components | [1, 2] | ItemTitle and ItemDescription |
components | [1] | ItemTitle |
components | [2] | ItemDescription |
2. Controls
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 zooming function with the mouse wheel. "control" can be either "mousedrag" or "mousemove"
Option | Defaultfalse | Description |
---|---|---|
useKeyboard | true | Enable or disable keyboard |
useMousewheel | true | Enable or disable zooming with mousewheel |
control | mousedrag | Choose between "mousedrag" and "mousemove" |
useMouseDrag | false | Enable or disable mouse dragging |
mouseDragSpeed | 0.05 | Mouse dragging speed |
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.
6. 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 |