Javascript slide player for use with our presenter platform

Configuration

Config Object

The element and presentation properties are required however the width and height are optional. The width and height can be declared as px values or percentages

var config = {
    "element": "<element_id>",
    "width": "640px",
    "height": "360px",
    "presentation": {
        "id": 1270,
        "title": "Slide player title",
        "description": "Short description",
        "user_id": "zyFXG",
        "organisation_id": "Bbgwg",
        "url": "",
        "status": "2000",
        "video_id": "dQ3pr",
        "date_created": "2014-01-29 16:14:57",
        "slides": {
            "3893": {
                "seconds": 0,
                "url": "http://lorempixel.com/640/480/cats/1"
            },
            "4894": {
                "seconds": 16,
                "url": "http://lorempixel.com/640/480/cats/2"
            },
            "5895": {
                "seconds": 33,
                "url": "http://lorempixel.com/640/480/cats/3"
            },
            "6896": {
                "seconds": 41,
                "url": "http://lorempixel.com/640/480/cats/4"
            }
        }
    }
}

Methods

ButoSlidePlayer(config)

Item Value
Scope Constructor
Returns ButoSlidePlayer

Parameters

Parameter Description
Object config A valid config object

Constructor - The config is optional and the init method can be used to initialise instead. If a valid config is passed in then this will initialise the slide player

var slide_player = new ButoSlidePlayer();
//or
var slide_player = new ButoSlidePlayer(config);

init(config)

Item Value
Scope Public
Returns ButoSlidePlayer

Parameters

Parameter Description
Object config A valid config object

Initialises the SlidePlayer and adds it to the page. Will fire a ready event once complete

var slide_player = new ButoSlidePlayer();
slide_player.init(config);

next()

Item Value
Scope Public
Returns ButoSlidePlayer

Move to the next slide

slide_player.next();

previous()

Item Value
Scope Public
Returns ButoSlidePlayer

Move to the previous slide

slide_player.previous();

previous()

Item Value
Scope Public
Returns ButoSlidePlayer

Move to the previous slide

slide_player.previous();

restart()

Item Value
Scope Public
Returns ButoSlidePlayer

Restart by moving to the first slide. Alias of jumpTo(1)

slide_player.restart();

jumpTo(position)

Item Value
Scope Public
Returns ButoSlidePlayer

Parameters

Parameter Description
Number position The position of the slide you want to jump to

Jump to a particular slide based on its position.

slide_player.jumpTo(5); //jump to the 5th slide

jumpToId(slide_id)

Item Value
Scope Public
Returns ButoSlidePlayer

Parameters

Parameter Description
String slide_id The id of the slide you want to jump to

Similar to jumpTo, jump to a particular slide referenced by its id.

slide_player.jumpToId('slide34dask43'); //jump to slide with the id 'slide34dask43'

destroy()

Item Value
Scope Public
Returns ButoSlidePlayer

Remove the the slide player from the DOM and remove any event listeners

slide_player.destroy();

Properties

config

Item Value
Scope public
Returns Object

This is the config that was used for this player instance see config object


chrome

Item Value
Scope public
Returns Object

This contains references to the DOM elements that make up the slide player controls and skin

slide_player.chrome  = {
    container: '<div/>', // this is the wrapper container div, most events are attached to this
    css_prefix: 'buto-slide-player-', // this is the default prefix used to style the slide player
    have_slides_loaded: true|false, // boolean stating if all the slides have loaded
    is_message_displayed: true|false, // boolean stating if a loading message is being displayed
    last_btn: '<a/>',
    next_btn: '<a/>',
    player: '<div/>',
    previous_btn: '<a/>',
    restart_btn: '<a/>',
    slide_count: '<span/>',
}

currentSlide

Item Value
Scope public
Returns Number

The position number of the current slide


currentSlideId

Item Value
Scope public
Returns Number

The current slides id


numberOfSlides

Item Value
Scope public
Returns Number

The total number of slides in the presentation


config

Item Value
Scope public
Returns Object

The presentation object that was passed in in the config object


Events

ButoSlidePlayerAvailable

Fired when the ButoSlidePlayer object has been added to the window. This event is fired against the document.

document.addEventListener('ButoSlidePlayerAvailable', function(e){
    var slide_player = new ButoSlidePlayer();
});

ButoSlidePlayerReady

Fired when the SlidePlayer has been instantiated and ready to interact with. This event is fired against the document.

document.addEventListener('ButoSlidePlayerReady', function(e){
    var slide_player = e.detail;
});

next

Fired when the next button has been pressed

slide_player.chrome.container.addEventListener('next', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

previous

Fired when the previous button has been pressed

slide_player.chrome.container.addEventListener('previous', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

restart

Fired when the restart button has been pressed

slide_player.chrome.container.addEventListener('restart', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

last

Fired when the jump to last button has been pressed

slide_player.chrome.container.addEventListener('last', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

jumpTo

Fired when the slide player has jumped to a particular slide

slide_player.chrome.container.addEventListener('jumpTo', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

slideChanged

Fired when the slide has changed

slide_player.chrome.container.addEventListener('slideChanged', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});

finished

Fired when the final slide is shown

slide_player.chrome.container.addEventListener('finished', function(e){
    var slide_player = e.detail;
    var current_slide = slide_player.currentSlide;
});