Overlay zooming slideshow

jquery.overlaySlideshow.js

/**
* overlaySlideshow
*
* Copyright 2011 Ryan Quigley
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
;(function($) {
    $.overlaySlideshow = function(options) {
        var defaults = {
            urls: [],
            contentEl: null,
            prevSel: '.prev',
            nextSel: '.next',
            playSel: '.play',
            zoomSel: '.img_cont',
            zoomImgSmallSel: '.i_small',
            zoomImgLargeSel: '.i_large',
            autoPlayInterval: 4000,
            detailSel: '.detail_cont .detail'
        };

        var plugin = this;

        var urls = [];
        var numWorks = 0;
        var curIdx = 0;
        var autoPlayIntId = 0;

        var zoomDetail;
        var hitEl;

        plugin.settings = {};

        var init = function() {
            plugin.settings = $.extend({}, defaults, options);
            var conf = plugin.settings;

            urls = plugin.settings.urls;
            numWorks = urls.length;

            conf.contentEl.delegate(conf.nextSel, 'click', onNextClick);
            conf.contentEl.delegate(conf.prevSel, 'click', onPrevClick);
            conf.contentEl.delegate(conf.playSel, 'click', onPlayClick);

            conf.contentEl.delegate(conf.zoomSel, 'mouseenter', onZoomInHandler);
            conf.contentEl.delegate(conf.zoomSel, 'mouseleave', onZoomOutHandler);
            conf.contentEl.delegate(conf.zoomSel, 'mousemove', onZoomMoveHandler);

            conf.contentEl.delegate(conf.detailSel, 'click', onDetailClick);
        };

        plugin.show = function(idx) {
            curIdx = idx;
            var url = urls[idx];
            $.get(url, function(data) {
                plugin.settings.contentEl.html(data);
            }).success(function() {
                if (autoPlayIntId) {
                    plugin.settings.contentEl.find(plugin.settings.playSel).addClass('playing');
                }
            });
        };

        var onNextClick = function() {
            if (++curIdx >= numWorks) {
                curIdx = 0;
            }
            plugin.show(curIdx);
        };

        var onPrevClick = function() {
            if (--curIdx < 0) {
                curIdx = numWorks - 1;
            }
            plugin.show(curIdx);
        };

        var onPlayClick = function() {
            if (autoPlayIntId) {
                clearInterval(autoPlayIntId);
                autoPlayIntId = 0;
                plugin.settings.contentEl.find(plugin.settings.playSel).removeClass('playing');

            } else {
                autoPlayIntId = setInterval(onNextClick, plugin.settings.autoPlayInterval);
                onNextClick();
                plugin.settings.contentEl.find(plugin.settings.playSel).addClass('playing');
            }
        };

        var onZoomInHandler = function() {
            var conf = plugin.settings;
            var el = $(conf.zoomImgLargeSel);
            hitEl = conf.contentEl.find('.hit_area');

            zoomDetail = {
                el: el,
                ratioX: hitEl.width() / (el.width() - hitEl.width()),
                ratioY: hitEl.height() / (el.height() - hitEl.height())
            };

            el.fadeIn();
        };

        var onZoomOutHandler = function() {
            zoomDetail.el.fadeOut();
            zoomDetail = null;
        };

        var onZoomMoveHandler = function(ev) {
            zoomDetail.el.css({
                left: -(ev.pageX - hitEl.offset().left) / zoomDetail.ratioX,
                top: -(ev.pageY - hitEl.offset().top) / zoomDetail.ratioY
            });
        };

        var onDetailClick = function() {
            var el = $(this);
            var imgSmall = el.find('img').attr('data-small-img');
            var imgLarge = el.find('img').attr('data-large-img');

            plugin.settings.contentEl.find('.i_small_cont img').attr('src', imgSmall);
            plugin.settings.contentEl.find('.i_large').attr('src', imgLarge);
        };

        init();
    };
})(jQuery);