Slide Show View

Setting up a Slide Show using Famo.us

by Mabuti

HTML

<script src="http://famousco.de/fiddle/famousBox.js"></script>

JavaScript

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');

    var SlideshowView = require('SlideshowView');

    var mainContext = Engine.createContext();

    var view = new SlideshowView();
    mainContext.add(view);


});
/*** SlideView ***/

define('SlideView', function (require, exports, module) {

    // Import additional modules to be used in this view 
    var View = require('famous/core/View');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var Transform = require('famous/core/Transform');
    var Modifier = require('famous/core/Modifier');
    var Transitionable = require("famous/transitions/Transitionable");

    // Constructor function for our SlideView class
    function SlideView(image) {

        // Applies View's constructor function to SlideView class
        View.apply(this, arguments);

        // Constants
        this.startOffset = -150;
        this.endOffset = -300;
        this.fadeInDuration = 1000;
        this.slideDuration = 5000;
        this.fadeOutDuration = 1000;
        this.imageName = image;

        _createImage.call(this);
    }

    // Establishes prototype chain for SlideView class to inherit from View
    SlideView.prototype = Object.create(View.prototype);
    SlideView.prototype.constructor = SlideView;

    // Default options for SlideView class
    SlideView.DEFAULT_OPTIONS = {};

    // Define your helper functions and prototype methods here
    SlideView.prototype.fadeIn = function () {
        var faderTrans = new Transitionable(0.0);
        faderTrans.set(
        1.0, {
            duration: this.fadeInDuration
        },
        this.slide.bind(this));

        this.dynamicModifier.opacityFrom(function () {
            return faderTrans.get();
        });
    };

    SlideView.prototype.slide = function () {
        var slideTrans = new Transitionable(0);
        slideTrans.set(
        this.endOffset - this.startOffset, {
            duration:...