See also Diaporama by Examples.
Create a Diaporama
var diaporama = Diaporama(container, data, props)
container(DOM Element) (required) : you must provide an (empty) DOM element container in which the Diaporama will be created.
data(Object) : data of the diaporama (e.g; extracted from a
diaporama.json), The format is described in JSON Data Format.
props(Object) : initial properties of the Diaporama. (
datacan also be passed in this object – in that case you can give
propsas second parameter).
N.B.: Every properties initially defined in props can also be accessed or set on a
width(number in pixels)
height(number in pixels)
currentTime(number in milliseconds)
duration(number in milliseconds, read-only)
networkTimeout(number in milliseconds)
For more details on each property, See Diaporama Properties section.
Diaporama has a few helper methods usually on top of Properties:
currentTimeto the time of the next slide. If duration is provided, there is a transition to go to the next slide time.
currentTimeto the time of the previous slide. If duration is provided, there is a transition to go to the previous slide time.
jump(slideIndex, [duration]): set
currentTimeto jump to a specific slide by its index. If duration is provided, there is a transition to go to the requested slide time.
feed(observable, opts): give an observable (stream) to feed the diaporama timeline over time. The observed values can be a slide OR an array of slides. Note: an observable has a
subscribe(onNext,onError,onCompleted)method that returns a disposable (with a
dispose()function). You can use RxJS with
Diaporama have events that let you watch and react on changes:
diaporamaobject is an
EventEmitterso it haves the same API:
removeListener,... Refer to Event Emitter documentation.
For more details on Events, See Diaporama Events section.