|
RokBox is a mootools powered JavaScript slideshow that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music. RokBox provides a theme system that allows you to create your own custom ones to fit your websites design. It includes two predefined themes, a Light theme and a Dark theme that will fit seemlessly into your site design. RokBox is as easy as pie to install and customize, providing an easy way to create your own custom themes for it.
Full list of supported media formats
- Images: Links ending with .gif, .jpg, .jpeg, .png or .bmp
- Generic Videos: Links ending with .mov, .qt, .mpeg, .divx, .avi, .xvid, .wmv, .wma, .wax, .wvx, .asx, .asf
- Video Sharing Services: YouTube, DailyMotion, Metacafe, Google Video, Vimeo, Simple .swf files
- Audio: Links ending with: .mp3, .wav
- PDF: Links ending with: .pdf
- Local and Remote URIs
Features
- Mootools v1.11 compatible
- 4 Customizable Transition Type: Fade, QuickSilver, Growl, Explode.
- Support for Images, QuickTime (.mov), Windows Media Video (.wmv), Flash (.swf), YouTube, DailyMotion, MetaCafe, Google Video, Vimeo, Audio (.mp3, .wav), local and remote sites.
- Support for albums/categories.
- Support for Captions including support for titles and descriptions.
- 2 Predefined Themes provided: Light Theme, Dark Theme.
- Support for custom themes with ability to customize styles and RokBox configuration per theme.
Written by Djamil Legato.
DEMO
Download：RokBox (427.64 kB)
rokbox-config.js
var rokbox;
window.addEvent('domready', function() {
rokbox = new RokBox({
'theme': 'custom', // this string must match the theme folder name (string, no space, lowercase)
'transition': Fx.Transitions.Quad.easeOut, // Transition to use when opening RokBox
'duration': 200, // Duration of opening RokBox Effect (integer, milliseconds)
'chase': 40, // Chase to use for the animation. works only for growl, see next line. (integer)
'frame-border': 0, // Width of each border if any (integer, pixels)
'content-padding': 0, // Padding of internal content wrapper (integer, pixels)
'arrows-height': 50, // Height of arrows div (integer, pixels)
'effect': 'quicksilver', // Type of effect to use. Presets are: 'quicksilver', 'growl', 'explode'
'captions': 1, // Whether to enable or disable captions (boolean, 1 or 0)
'captionsDelay': 800, // How long captions effect should last, when captions are enabled (integer, milliseconds)
'scrolling': 0, // Makes RokBox follow when scrolling the page (boolean, 1 or 0)
'keyEvents': 0, // Enable keyevents. Esc, Left, Right to close and change previous or next (boolean, 1 or 0)
'overlay': {
'background': '#000000', // Overlay background color (string, hex color format with starting hash #)
'opacity': 0.85, // Opacity of the overlay (float, from 0 to 1, 0.1 makes it invisible but clickable)
'duration': 200, // Duration of overlay effect (integer, milliseconds)
'transition': Fx.Transitions.Quad.easeInOut // Transition to use for opacity effect
},
'defaultSize': {
'width': 640, // Default RokBox window width (integer)
'height': 460 // Default RokBox window height (integer)
},
'autoplay': 'true', // Enable or disable autoplay for QuickTimes and WM videos (string, 'true' or 'false')
'controller': 'true', // Enable or disable controllers for QuickTimes and WM videos (string, 'true' or 'false')
'bgcolor': '#ffffff', // Set Background colors for all videos and flash services that support it (string, hex color format with starting hash #)
'youtubeAutoplay': 0, // Enable or disable autoplay for YouTube (boolean, 1 or 0)
'vimeoColor': '00adef', // Vimeo Color Scheme (string, hex color format WITHOUT starting hash #)
'vimeoPortrait': 0, // Enable or disable Vimeo Portrait Button (boolean, 1 or 0)
'vimeoTitle': 0, // Enable or disable Vimeo Title caption (boolean, 1 or 0)
'vimeoFullScreen': 1, // Enable or disable Vimeo FullScreen button (boolean, 1 or 0)
'vimeoByline': 0 // Enable or disable Vimeo's Author line (boolean, 1 or 0)
});
});
Newer news items:
Older news items:
|
Show/Hide comments
Show/Hide comment form
