Simple embedded slideshow.

slideshow.js

/*globals jQuery*/
require([
    "dojo/domReady!"
], function () {
    "use strict";
    var slideshow = {
        imageTransitionDuration: 400,
        imagePollTimeout: 5000,
        imagePollFrequency: 100,
        init: function (slideshowEl) {
            slideshowEl = jQuery(slideshowEl);
            this.linkEls = slideshowEl.find('.slideshow-thumblink');
            this.thumbEls = slideshowEl.find('.slideshow-thumb');
            this.captionEls = slideshowEl.find('.slideshow-thumbcaption');
            this.length = this.thumbEls.length;
            this.enabled = this.thumbEls.length > 0;
            this.leftControlEl = slideshowEl.find('.slideshow-left');
            this.rightControlEl = slideshowEl.find('.slideshow-right');
            this.lightboxControlEl = slideshowEl.find('.slideshow-lightbox');
            this.index = 0;
            this.imageEl = slideshowEl.find('.slideshow-image');
            this.captionEl = slideshowEl.find('.slideshow-caption');
            this.attachEvents();
        },
        loadImage: function (src, complete) {
            var self = this, loader = {
                timer: null,
                img: new Image(),
                timeSpent: 0
            };
            loader.img.src = src;
            function _pollWidth() {
                if (loader.img.width && loader.img.width > 0) {
                    complete(true);
                } else {
                    loader.timeSpent += self.imagePollFrequency;
                    if (loader.timer !== null) {
                        window.clearTimeout(loader.timer);
                        loader.timer = null;
                    }
                    // Give up after a certain time limit.
                    if (loader.timeSpent >= self.imagePollTimeout) {
                        complete(false);
                    } else {
                        loader.timer = window.setTimeout(_pollWidth,
                            self.imagePollFrequency);
                    }
                }
            }
            loader.timer = window.setTimeout(_pollWidth,
                this.imagePollFrequency);
        },
        open: function (index) {
            if (this.enabled && index < this.thumbEls.length && index >=0) {
                this.index = index;
                var src = jQuery(this.linkEls[index]).attr('href'),
                    title = jQuery(this.thumbEls[index]).attr('title'),
                    html = jQuery(this.captionEls[index]).html(),
                    self = this;
                this.enabled = false;
                self.captionEl.html("Loading...");
                this.loadImage(src, function (success) {
                    // @TODO: Do something when !success.
                    self.enabled = true;
                    self.imageEl.attr('src', src);
                    self.imageEl.attr('title', title);
                    self.captionEl.html(html);
                });
            }
        },
        attachEvents: function () {
            var self = this;
            function nextImage(event) {
                event.preventDefault();
                self.moveLeft();
            }
            this.leftControlEl.on('click', nextImage);
            // Clicking on the image also loads the next image.
            this.imageEl.on('click', nextImage);
            this.rightControlEl.on('click', function (event) {
                event.preventDefault();
                self.moveRight();
            });
            this.lightboxControlEl.on('click', function (event) {
                event.preventDefault();
                self.openLightbox(self.index);
            });
            this.linkEls.each(function (index, linkEl) {
                // Create closure around index.
                function getHandler(index, self) {
                    return function (event) {
                        event.preventDefault();
                        self.open(index);
                    };
                }
                jQuery(linkEl).on('click', getHandler(index, self));
            });
        },
        moveLeft: function () {
            if (this.enabled) {
                // If at the start, loop to the end.
                if (this.index === 0) {
                    this.index = this.length - 1;
                } else {
                    this.index -= 1;
                }
                this.open(this.index);
            }
        },
        moveRight: function () {
            if (this.enabled) {
                // If at the end, loop to the start.
                if (this.index === this.length - 1) {
                    this.index = 0;
                } else {
                    this.index += 1;
                }
                this.open(this.index);
            }
        },
        openLightbox: function (openIndex) {
            var self = this, lightBoxEntries = [];
            if (this.enabled) {
                this.thumbEls.each(function (thumbIndex) {
                    lightBoxEntries[lightBoxEntries.length] = {
                        'href': jQuery(self.linkEls[thumbIndex]).attr('href'),
                        'title': jQuery(self.captionEls[thumbIndex]).html()
                    };
                });
                jQuery.fancybox.open(lightBoxEntries, {
                    index: openIndex,
                    helpers: {
                        title: {
                            type: 'inside'
                        }
                    }
                });
            }
        }
    };
    // Crockford create object function.
    if (typeof Object.create !== 'function') {
        Object.create = function (o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }
    jQuery('.slideshow').each(function() {
        var s = Object.create(slideshow);
        s.init(this);
    });
});