Subversion Repositories SmartDukaan

/** 
 * jQuery Slidy - A Transition Plugin - http://wbotelhos.com/slidy 
 * --------------------------------------------------------------------------------- 
 * 
 * jQuery Slidy is a plugin that generates a customizable transitions automatically. 
 * 
 * Licensed under The MIT License 
 * 
 * @version         0.2.0 
 * @since           11.16.2010 
 * @author          Washington Botelho dos Santos 
 * @documentation   wbotelhos.com/slidy 
 * @twitter         twitter.com/wbotelhos 
 * @license         opensource.org/licenses/mit-license.php MIT 
 * @package         jQuery Plugins 
 * 
 * Usage with default values: 
 * --------------------------------------------------------------------------------- 
 * $('#banner').slidy(); 
 * 
 * <div id="banner"> 
 *   <img src="image-1.jpg"/> 
 *   <img src="image-2.jpg"/> 
 *   <img src="image-3.jpg"/> 
 * </div> 
 * 
 */ 
 
;(function($) { 
 
    $.fn.slidy = function(settings) { 
 
        if (this.length == 0) { 
            debug('Selector invalid or missing!'); 
            return; 
        } else if (this.length > 1) { 
            return this.each(function() { 
                $.fn.slidy.apply($(this), [settings]); 
            }); 
        } 
 
        var opt            = $.extend({}, $.fn.slidy.defaults, settings), 
            $this        = $(this), 
            id            = this.attr('id'), 
            elements    = $this.children(opt.children), 
            quantity    = elements.length, 
            images        = (opt.children == 'img') ? elements : elements.find('img'), 
            timer        = 0, 
            isAnimate    = false; 
 
        if (id === undefined) { 
            id = 'slidy-' + $this.index(); 
            $this.attr('id', id);  
        } 
 
        $this 
        .data('options', opt) 
        .css({ 
            'cursor':    opt.cursor, 
            'height':    opt.height + 'px', 
            'overflow':    'hidden', 
            'position':    'relative', 
            'width':    opt.width + 'px' 
        }); 
 
        elements.each(function(i) { 
            $(this) 
            .css({ 'position': 'absolute', 'z-index': quantity - i }) 
            .attr('id', $this.attr('id') + '-' + (i + 1)); 
        }); 
 
        images.attr({ height: opt.height, width: opt.width }).css('border', '0'); 
 
        if (opt.children == 'a' && opt.target != '') { 
            elements.attr('target',    opt.target); 
        } 
 
        elements.hide().first().show(); 
 
        if (opt.menu) { 
            $menu = $('<ul/>', { id: id + '-slidy-menu', 'class': 'slidy-menu' }).insertAfter($this); 
        } 
 
        var stop = function() { 
            clearTimeout(timer); 
        }, overBanner = function() { 
            stop(); 
        }, overMenu = function(thiz) { 
            stop(); 
 
            var $this        = $(this), 
                index        = $this.index(), 
                $current    = $this.parent().children('.slidy-link-selected'), 
                last        = $current.index(); 
 
            if (index != last) { 
                $current.removeClass('slidy-link-selected'); 
                $this.addClass('slidy-link-selected'); 
 
                change(last, index); 
            } 
        }, outBanner = function(thiz) { 
            go($(thiz.target).parent('a').index()); 
        }, outMenu = function() { 
            var $this        = $(this), 
                index        = $this.index(), 
                $current    = $this.parent().children('.slidy-link-selected'), 
                last        = $current.index(); 
 
            go(last); 
        }, clickMenu = function(thiz) { 
            stop(); 
 
            var $this        = $(this), 
                index        = $this.index(), 
                $current    = $this.parent().children('.slidy-link-selected'), 
                last        = $current.index(); 
 
            if (index != last) { 
                $current.removeClass('slidy-link-selected'); 
                $this.addClass('slidy-link-selected');
                change(last, index); 
            } 
 
            go(index); 
        }; 
 
        if (opt.menu) { 
            var target    = (opt.target != '') ? 'target="' + opt.target + '"' : '', 
                menu    = '', 
                parent, 
                img; 
 
            images.each(function() { 
                img        = $(this); 
                parent    = img.parent(opt.children); 
 
                menu += '<li><a href="javascript:void(0)" ' + target + '>' + img.attr('title') + '</a></li>'; 
            }); 
 
            $menu.html(menu); 
 
            var    space    = parseInt((opt.width / quantity) + (quantity - 1)), 
                diff    = opt.width - (space * quantity), 
                links    = $menu.children('li'); 
 
            if (opt.action == 'mouseenter') { 
                links.mouseenter(overMenu).mouseleave(outMenu);     
            } else if (opt.action == 'click') { 
                links.click(clickMenu); 
            } else { 
                debug('action attribute must to be "click" or "mouseenter"!'); 
                return; 
            } 
 
            links.css('width', space) 
                .first().addClass('slidy-link-selected') 
            .end() 
                .last().css({ 'border-right': '0', 'width': (space + diff) - (quantity) }); 
             
            if (opt.animation == 'slide' || opt.animation == 'fade') { 
                links.mousemove(function() { 
                    var $this = $(this); 
 
                    if (!$this.hasClass('slidy-link-selected')) { 
                        $this.mouseenter(); 
                    } 
                }); 
            } 
        } 
 
        go(0); 
 
        if (opt.pause) { 
            $this.mouseenter(overBanner).mouseleave(outBanner); 
        } 
 
        function go(index) { 
            var total    = quantity - 1, 
                last    = null; 
 
            if (index > total) { 
                index = 0; 
                last = total; 
            } else if (index <= 0) { 
                index = 0; 
                last = total; 
            } else { 
                last = index - 1; 
            } 
 
            change(last, index); 
 
            timer =    setTimeout(function() { 
                    go(++index); 
                }, opt.time); 
        } 
 
        function change(last, index) { 
            if (!isAnimate) { 
                isAnimate = true; 
 
                if (opt.animation == 'fade') { 
                    elements 
                        .eq(last).fadeOut(opt.speed) 
                    .end() 
                        .eq(index).fadeIn(opt.speed, function() { 
                            selectMenu(index); 
                            isAnimate = false; 
                        }); 
                } else if (opt.animation == 'slide') { 
                    animatedElement = elements.eq(index); 
                    elements.css('z-index', 0) 
                        .eq(index).css('z-index', quantity).slideLeftShow(opt.speed, function() { 
                                elements.eq(last).hide(); 
                                selectMenu(index); 
                                isAnimate = false; 
                        }); 
                } else { 
                    elements 
                    .eq(last).hide() 
                    .end() 
                    .eq(index).show(0, function() { 
                        selectMenu(index); 
                        isAnimate = false; 
                    }); 
                } 
            } 
        }; 
 
        function selectMenu(index) { 
            if (opt.menu) { 
                $this 
                    .next('ul.slidy-menu') 
                        .children().removeClass('slidy-link-selected') 
                            .eq(index).addClass('slidy-link-selected'); 
            } 
        }; 
 
        return $this; 
    }; 
 
    function debug(message) { 
        if (window.console && window.console.log) { 
            window.console.log(message); 
        } 
    }; 
 
    $.fn.slidy.defaults = { 
        action:        'click', 
        animation:    'slide', 
        children:    'img', 
        cursor:        'default', 
        height:        200, 
        menu:        false, 
        pause:        false, 
        speed:        600, 
        target:        '', 
        time:        3600, 
        width:        710 
    }; 
     
    $.fn.slideLeftHide = function(speed, callback) { 
        this.animate({ 
            width: "hide",  
            paddingLeft: "hide",  
            paddingRight: "hide",  
            marginLeft: "hide",  
            marginRight: "hide" 
        }, speed, callback); 
    } 
 
    $.fn.slideLeftShow = function(speed, callback) { 
        this.animate({ 
            width: "show",  
            paddingLeft: "show",  
            paddingRight: "show",  
            marginLeft: "show",  
            marginRight: "show" 
        }, speed, callback); 
    } 
})(jQuery);