ThreeSixty Viewer

360 degree product viewer with MooTools.

by JordanBlount

HTML

<h1>ThreeSixty Viewer Demo by <a href="http://ryanflorence.com/mootools-threesixty-viewer-featuring-the-ipad/" target="_new">Ryan Florence</a></h1>
<h2>Click and drag</h2>
<div id="viewer">
    <img src="http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_001.jpg" />
</div>

CSS

body {
    font-family: helvetica, arial;
    text-align: center;
}

JavaScript

var MouseWatcher = new Class({

    Implements: [Options, Events],

    options: {
/*
            onStart: $empty,
            onEnd: $empty,
            onDrag: $empty,
            */
        downClass: 'down',
        dragClass: 'dragging'
    },

    isDragging: false,
    isDown: false,
    started: {
        x: false,
        y: false
    },
    finished: {
        x: false,
        y: false
    },

    initialize: function(element, options) {
        this.setOptions(options);
        this.element = document.id(element);
        this.document = document.id(document);
        this.attachments = {
            mousedown: this.start.bind(this),
            mouseup: this.finish.bind(this)
        };
        this.boundMouseMove = this.mousemove.bind(this);
        this.attach();
    },

    attach: function() {
        this.element.addEvents(this.attachments);
        return this;
    },

    detach: function() {
        this.element.removeEvents(this.attachments);
        return this;
    },

    start: function(event) {
        this.started = event.client;
        this.isDown = true;
        this.element.addClass(this.options.downClass);
        this.element.addEvent('mousemove', this.boundMouseMove);
        this.document.addEvent('mouseup', this.attachments.mouseup);
        this.fireEvent('start', this.started);
        return this;
    },

    finish: function(event) {
        this.finished = (event) ? event.client : this.current;
        this.isDown = false;
        this.element.removeEvent('mousemove', this.boundMouseMove);
        this.document.removeEvent('mouseup', this.attachments.finish);
        this.element.removeClass(this.options.downClass);
        this.fireEvent('finish', this.finished);
        return this;
    },

    mousemove: function(event) {
        this.current = event.client;
        this.isDragging = true;
        this.element.addClass(this.options.dragClass);
        this.fireEvent('drag', this.current);
        return this;
   ...