A fast(?) fullscreen image-sequence player.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Sequencer - A fast(?) fullscreen image-sequence player.

How to use:

    The minimum paramters are two filenames of an image sequence.

    The parser tries to figure out if there are leading zeroes:

    var s1 = Sequencer.create({
        from : 'pics/pig/DSC04701.JPG',
        to   : 'pics/pig/DSC04775.JPG',

    ...or just a plain numerical sequence:

    var s2 = Sequencer.create({
        from : 'pics/dog/1.png',
        to   : 'pics/dog/100.png',

    All options:

    var opts = {
        from             : '1.jpg',     // first file of the sequence
        to               : '10.jpg',    // last file of the sequence
        step             : 1,           // increment: to load only even images use 2, etc.
        scaleMode        : 'cover',     // can be: auto, cover, contain as in CSS3,
        direction        : 'x',         // can be: x, -x, y, -y
                                        // and determines the pointer direction,
                                        // applies only if playMode is drag or hover
        playMode         : 'drag',      // can be: none, drag, hover, auto
        loop             : 'loop',      // can be: loop, pong, none
        interval         : 10,          // interval in milliseconds between each frame,
                                        // applies only if playMode is auto,
                                        // if set to zero tries to update at every frame event
        autoLoad         : 'all',       // can be: all, first, none,
                                        // if first or none is used the loading
                                        // needs to be triggered manually with load().
        fitFirstImage    : false,       // resizes the canvas to the size of
                                        // the first loaded image in the sequence
        showLoadedImages : false,       // shows images while loading the sequence,
                                        // may be jumpy because of async laoding
        dragAmount       : 10,          // distance (in pixels) to trigger nextImage(),
                                        // can be < 1, but must be > 0
        retina           : true,        // use HDPI if present
        imageLoad        : function     // callback for each image load
        queueComplete    : function     // callback for queue complete


    - multiple instances
    - better parser (automatic leading zeroes detection)
    - canvas only (2d)
    - incremental drag
    - removed default loader (a custom one can be implemented via callback)
    - cover frame

    - accept an image array as parameter
    - accept a spritesheet as parameter
    - WebGL support
    - better touch support

    Andreas Gysin
    @andreasgysin (twitter)

Project page:

    The source code of this project is licensed
    under the Apache Software License 2.0.

    All non-code assets are published under
    the Creative Commons Attribution-NonCommercial license.

    (c) 2012-16 Andreas Gysin