slide.js

(function () {

    var Slide = function (thumbs, image) {
        this.thumbs = thumbs || [];
        this.image = image || new Image();
        this.images = [];
        if (this.thumbs.length) {
            this.show(0);
        }
    };

    Slide.prototype.eachThumb = function (callback) {
        if (!this.thumbs.length) {
            return;
        }
        var i = 0;
        var count = this.thumbs.length;
        for (; i < count; i++) {
            var result = callback.call(this, this.thumbs[i], i);
            if (typeof(result) !== 'undefined') {
                return result;
            }
        }
    };

    Slide.prototype.activeIndex = function () {
        return this.eachThumb(function (t, i) {
                if (t.getAttribute('data-active') === '1') {
                    return i;
                }
            }) || 0;
    };

    Slide.prototype.loadImage = function (index, done) {
        if (!this.thumbs.length) {
            return;
        }
        var image = this.images[index];
        if (image) {
            done(image);
            return image;
        }
        image = new Image();
        image.src = this.thumbs[index].getAttribute('data-src');
        if (image.complete) {
            this.images[index] = image;
            done(image);
            return image;
        }
        var _this = this;
        image.onload = image.onerror = function () {
            _this.images[index] = this;
            this.onload = this.onerror = null;
            done(this);
        };
    };

    Slide.prototype.imageTransition = function (image, done) {
        this.image.parentNode.replaceChild(image, this.image);
        this.image = image;
        done();
    };

    Slide.prototype.thumbTransition = function (fromThumb, toThumb, done) {
        fromThumb.style.border = '1px solid white';
        toThumb.style.border = '1px solid red';
        done();
    };

    Slide.prototype.transitionTo = function (index) {
        if (!this.thumbs.length) {
            return;
        }
        var _this = this;
        this.loadImage(index, function (image) {
            _this.imageTransition(image, function () {
                var fromIndex = _this.activeIndex();
                _this.thumbTransition(_this.thumbs[fromIndex], _this.thumbs[index], function () {
                    _this.thumbs[fromIndex].setAttribute('data-active', '0');
                    _this.thumbs[index].setAttribute('data-active', '1');
                });
            });
        });
    };

    Slide.prototype.previous = function () {
        var activeIndex = this.activeIndex();
        if (typeof(activeIndex) === 'undefined') {
            return;
        }
        var previousIndex = activeIndex - 1;
        this.show(previousIndex);
    };

    Slide.prototype.next = function () {
        var activeIndex = this.activeIndex();
        if (typeof(activeIndex) === 'undefined') {
            return;
        }
        var nextIndex = activeIndex + 1;
        this.show(nextIndex);
    };

    Slide.prototype.show = function (index) {
        this.transitionTo(index);
    };

    Slide.prototype.showThumb = function (thumb) {
        var index = this.eachThumb(function (t, i) {
            if (t === thumb) {
                return i;
            }
        });
        if (typeof(index) !== 'undefined') {
            this.transitionTo(index);
        }
    };

    window.Slide = Slide;
}());

var $thumbs = $('img[data-src]');

var s = new Slide($thumbs.get(), document.getElementById('viewer'), {});

$thumbs.on('click', function (e) {
s.showThumb(this);
});