Gallery

html

<section class="gallery">
	
	<img src="/media/slide.jpg" alt="Alt Text" width="600" data-text="Slide Text" />

	<img src="/media/slide.jpg" alt="Alt Text" width="600" data-text="Slide Text 2" />

	<div class="detail"></div>

	<nav>
		<a href="#" class="ir next" title="Next">Next</a>
		<a href="#" class="ir prev" title="Previous">Previous</a>
	</nav>

</section>

request_interval.js

// requestAnimationFrame() shim by Paul Irish
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
    return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback, element){
                window.setTimeout(callback, 16.667);
            };
})();

/**
 * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
 * @param {function} fn The callback function
 * @param {int} delay The delay in milliseconds
 */
window.requestInterval = function(fn, delay) {
    if (!window.requestAnimationFrame &&
        !window.webkitRequestAnimationFrame &&
        !window.mozRequestAnimationFrame &&
        !window.oRequestAnimationFrame &&
        !window.msRequestAnimationFrame) {
        return window.setInterval(fn, delay);
    }
    var start = new Date().getTime(),
        handle = {};

    function loop() {
        var current = new Date().getTime(),
            delta = current - start;

        if (delta >= delay) {
            fn.call();
            start = new Date().getTime();
        }
        handle.value = requestAnimFrame(loop);
    }
    handle.value = requestAnimFrame(loop);
    return handle;
};

/**
 * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
 * @param {int|object} fn The callback function
 */
window.clearRequestInterval = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    clearInterval(handle);
};

/**
 * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
 * @param {function} fn The callback function
 * @param {int} delay The delay in milliseconds
 */
window.requestTimeout = function(fn, delay) {
    if (!window.requestAnimationFrame &&
        !window.webkitRequestAnimationFrame &&
        !window.mozRequestAnimationFrame &&
        !window.oRequestAnimationFrame &&
        !window.msRequestAnimationFrame) {
        return window.setTimeout(fn, delay);
    }

    var start = new Date().getTime(),
        handle = {};
    
    function loop(){
        var current = new Date().getTime(),
            delta = current - start;
        if (delta >= delay) {
            fn.call();
        } else {
            handle.value = requestAnimFrame(loop);
        }
    }
    handle.value = requestAnimFrame(loop);
    return handle;
};

/**
 * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
 * @param {int|object} fn The callback function
 */
window.clearRequestTimeout = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    clearTimeout(handle);
};

slideshow.js

/*
Call the plugin with $('jquery-selector').slideshow({ auto:true, speed:8000 });
*/

(function($) {
    var Slideshow = function(el, opts) {
        var app = {};
        //Defaults are below
        var settings = $.extend({}, $.fn.slideshow.defaults, opts),
            $el = $(el),
            $nav = $el.find('nav'),
            $detail = $el.find('.detail'),
            $cur = null,
            interval = {},
            cur = 0,
            sel = 'img',
            tot = 0,
            tries = 0;

        // private methods
        function init() {
            tot = $el.find(sel).length;
            
            if (tot < 1) {
                $el.remove();
                return;
            } else if (tot > 1) {
                if (settings.auto) {
                    interval = requestInterval(onNext, settings.speed);
                }
            }

            $nav
                .find('.prev')
                .click(onPrevious);

            $nav
                .find('.next')
                .click(onNextClick);

            $cur = $el.find(sel + ':first');
            
            show();
        }
        function onNextClick(e) {
            e.preventDefault();
            clearRequestInterval(interval);
            onNext();
        }
        function onNext() {
            ++cur;
            if (cur >= tot) {
              cur = 0;
            }
            show();
        }
        function onPrevious(e) {
            e.preventDefault();
            clearRequestInterval(interval);
            --cur;
            if (cur < 0) { cur = tot - 1; }
            show();
        }
        function show() {
            var targ = $cur;
            $cur.
                stop()
                .fadeTo(150, 0, function(){
                    targ.hide();
                });

            $cur = $el.find(sel + ':nth-child(' + (cur + 1) + ')');
            
            if ($cur.width() <= 10) {
                ++tries;
                if (tries < 20) {
                    requestTimeout(show, 500);
                }
                return;
            }
            $cur
                .css({ left: -($cur.width() - 960) * 0.5 })
                .stop()
                .show()
                .fadeTo(250, 1);

            // update 11 of 20 text

            $detail
                .stop()
                .fadeTo(150, 0, onDetailOut);
        }
        function onDetailOut(){
            $detail.html($cur.data('text'));
            $detail
                .stop()
                .fadeTo(150, 1);
        }
        init();
    };
    $.fn.slideshow = function(opts) {
        return this.each(function(idx, el) {
            var $el = $(this),
                key = 'slideshow';
            if ($el.data(key)) { return; }
            var slideshow = new Slideshow(this, opts);
            $el.data(key, slideshow);
        });
    };
    // default settings
    $.fn.slideshow.defaults = {
        auto:true,
        speed:6000
    };
})(jQuery);