wascade Голосов: 0 Адрес блога: http://wascade.blogspot.com/ Добавлен: 2013-11-10 21:46:47

jquery.skitter.js

2013-11-09 22:18:00 (читать в оригинале)

/**
 * jQuery Skitter Slideshow
 * @name jquery.skitter.js
 * @description Slideshow
 * @author Thiago Silva Ferreira - http://thiagosf.net
 * @version 4.0
 * @date August 04, 2010
 * @update April 19, 2012
 * @copyright (c) 2010 Thiago Silva Ferreira - http://thiagosf.net
 * @license Dual licensed under the MIT or GPL Version 2 licenses
 * @example http://thiagosf.net/projects/jquery/skitter/
 */

(function($) {
   
    var number_skitter = 0,
        skitters = [];
   
    $.fn.skitter = function(options) {
        return this.each(function() {
            $(this).data('skitter_number', number_skitter);
            skitters.push(new $sk(this, options, number_skitter));
            ++number_skitter;
        });
    };
   
    var defaults = {
        velocity:                 1,
        interval:                 2500,
        animation:                 '',
        numbers:                 true,
        navigation:                 true,
        label:                    true,
        easing_default:         '',
        box_skitter:             null,
        time_interval:             null,
        images_links:             null,
        image_atual:             null,
        link_atual:             null,
        label_atual:             null,
        target_atual:             '_self',
        width_skitter:             null,
        height_skitter:         null,
        image_i:                 1,
        is_animating:              false,
        is_hover_box_skitter:     false,
        random_ia:                 null,
        show_randomly:             false,
        thumbs:                 false,
        animateNumberOut:         {backgroundColor:'#333', color:'#fff'},
        animateNumberOver:         {backgroundColor:'#fff', color:'#000'},
        animateNumberActive:     {backgroundColor:'#cc3333', color:'#fff'},
        hideTools:                 false,
        fullscreen:             false,
        xml:                     false,
        dots:                     false,
        width_label:             null,
        opacity_elements:        0.75, // Final opacity of elements in hideTools
        interval_in_elements:    300, // Interval animation hover elements hideTools
        interval_out_elements:    500, // Interval animation out elements hideTools
        onLoad:                    null,
        imageSwitched:            null,
        max_number_height:         20,
        numbers_align:            'left',
        preview:                false,
        focus:                    false,
        foucs_active:            false,
        focus_position:            'center',
        controls:                false,
        controls_position:        'center',
        progressbar:            false,
        progressbar_css:        {},
        is_paused:                false,
        is_blur:                false,
        is_paused_time:            false,
        timeStart:                0,
        elapsedTime:            0,
        stop_over:                true,
        enable_navigation_keys:    false,
        with_animations:        [],
        mouseOverButton:         function() { $(this).stop().animate({opacity:0.5}, 200); },
        mouseOutButton:         function() { $(this).stop().animate({opacity:1}, 200); },
        auto_play:                 true,
        structure:                    '<a href="#" class="prev_button">prev</a>'
                                + '<a href="#" class="next_button">next</a>'
                                + '<span class="info_slide"></span>'
                                + '<div class="container_skitter">'
                                    + '<div class="image">'
                                        + '<a href=""><img class="image_main" /></a>'
                                        + '<div class="label_skitter"></div>'
                                    + '</div>'
                                + '</div>'
       
    };
   
    $.skitter = function(obj, options, number) {
        this.box_skitter = $(obj);
        this.timer = null;
        this.settings = $.extend({}, defaults, options || {});
        this.number_skitter = number;
        this.setup();
    };
   
    // Shortcut
    var $sk = $.skitter;
   
    $sk.fn = $sk.prototype = {};
   
    $sk.fn.extend = $.extend;
   
    $sk.fn.extend({
       
        /**
         * Init
         */
        setup: function()
        {
            var self = this;

            // Fullscreen
            if (this.settings.fullscreen) {
                var width = $(window).width();
                var height = $(window).height();
                this.box_skitter.width(width).height(height);
                this.box_skitter.css({'position':'absolute', 'top':0, 'left':0, 'z-index':1000});
                this.settings.stop_over = false;
                $('body').css({'overflown':'hidden'});
            }
           
            this.settings.width_skitter     = parseFloat(this.box_skitter.css('width'));
            this.settings.height_skitter     = parseFloat(this.box_skitter.css('height'));
           
            if (!this.settings.width_skitter || !this.settings.height_skitter) {
                console.warn('Width or height size is null! - Skitter Slideshow');
                return false;
            }
           
            // Structure html
            this.box_skitter.append(this.settings.structure);
           
            // Settings
            this.settings.easing_default     = this.getEasing(this.settings.easing);
                       
            if (this.settings.velocity >= 2) this.settings.velocity = 1.3;
            if (this.settings.velocity <= 0) this.settings.velocity = 1;
           
            this.box_skitter.find('.info_slide').hide();
            this.box_skitter.find('.label_skitter').hide();
            this.box_skitter.find('.prev_button').hide();
            this.box_skitter.find('.next_button').hide();
                       
            this.box_skitter.find('.container_skitter').width(this.settings.width_skitter);
            this.box_skitter.find('.container_skitter').height(this.settings.height_skitter);
           
            var width_label = this.settings.width_label ? this.settings.width_label : this.settings.width_skitter;
            this.box_skitter.find('.label_skitter').width(width_label);
           
            var initial_select_class = ' image_number_select', u = 0;
            this.settings.images_links = new Array();
           
            // Add image, link, animation type and label
            var addImageLink = function (link, src, animation_type, label, target) {
                self.settings.images_links.push([src, link, animation_type, label, target]);
                if (self.settings.thumbs) {
                    var dimension_thumb = '';
                    if (self.settings.width_skitter > self.settings.height_skitter) {
                        dimension_thumb = 'height="100"';
                    }
                    else {
                        dimension_thumb = 'width="100"';
                    }
                    self.box_skitter.find('.info_slide').append(
                        '<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'
                            +'<img src="'+src+'" '+dimension_thumb+' />'
                            +'</span> '
                    );
                }
                else {
                    self.box_skitter.find('.info_slide').append(
                        '<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'+u+'</span> '
                    );
                }
                initial_select_class = '';
            };

            // Load from XML
            if (this.settings.xml) {
                $.ajax({
                    type: 'GET',
                    url: this.settings.xml,
                    async: false,
                    dataType: 'xml',
                    success: function(xml) {
                        var ul = $('<ul></ul>');
                        $(xml).find('skitter slide').each(function(){
                            ++u;
                            var link             = ($(this).find('link').text()) ? $(this).find('link').text() : '#';
                            var src             = $(this).find('image').text();
                            var animation_type     = $(this).find('image').attr('type');
                            var label             = $(this).find('label').text();
                            var target             = ($(this).find('target').text()) ? $(this).find('target').text() : '_self';
                            addImageLink(link, src, animation_type, label, target);
                        });
                    }
                });
            }
            // Load from json
            else if (this.settings.json) {
               
            }
            // Load from HTML
            else {
                this.box_skitter.find('ul li').each(function(){
                    ++u;
                    var link             = ($(this).find('a').length) ? $(this).find('a').attr('href') : '#';
                    var src             = $(this).find('img').attr('src');
                    var animation_type     = $(this).find('img').attr('class');
                    var label             = $(this).find('.label_text').html();
                    var target             = ($(this).find('a').length && $(this).find('a').attr('target')) ? $(this).find('a').attr('target') : '_self';
                    addImageLink(link, src, animation_type, label, target);
                });
            }
           
            // Thumbs
            if (self.settings.thumbs && !self.settings.fullscreen)
            {
                // New animation
                self.settings.animateNumberOut = {opacity:0.3};
                self.settings.animateNumberOver = {opacity:0.5};
                self.settings.animateNumberActive = {opacity:1};
               
                self.box_skitter.find('.info_slide').addClass('info_slide_thumb');
                var width_info_slide = (u + 1) * self.box_skitter.find('.info_slide_thumb .image_number').width();
                self.box_skitter.find('.info_slide_thumb').width(width_info_slide);
                self.box_skitter.css({height:self.box_skitter.height() + self.box_skitter.find('.info_slide').height()});
               
                self.box_skitter.append('<div class="container_thumbs"></div>');
                var copy_info_slide = self.box_skitter.find('.info_slide').clone();
                self.box_skitter.find('.info_slide').remove();
                self.box_skitter.find('.container_thumbs')
                    .width(self.settings.width_skitter)
                    .append(copy_info_slide);
               
                // Scrolling with mouse movement
                var width_image = 0,
                    width_skitter = this.settings.width_skitter,
                    height_skitter = this.settings.height_skitter,
                    w_info_slide_thumb = 0,
                    info_slide_thumb = self.box_skitter.find('.info_slide_thumb'),
                    x_value = 0,
                    y_value = self.box_skitter.offset().top;
                   
                info_slide_thumb.find('.image_number').each(function(){
                    width_image += $(this).outerWidth();
                });
               
                info_slide_thumb.width(width_image+'px');
                w_info_slide_thumb = info_slide_thumb.width();
                width_value = this.settings.width_skitter;
               
                width_value = width_skitter - 100;
               
                if (width_info_slide > self.settings.width_skitter) {
                    self.box_skitter.mousemove(function(e){
                        x_value = self.box_skitter.offset().left + 90;
                       
                        var x = e.pageX, y = e.pageY, new_x = 0;
                       
                        x = x - x_value;
                        y = y - y_value;
                        novo_width = w_info_slide_thumb - width_value;
                        new_x = -((novo_width * x) / width_value);
                       
                        if (new_x > 0) new_x = 0;
                        if (new_x < -(w_info_slide_thumb - width_skitter)) new_x = -(w_info_slide_thumb - width_skitter);
                       
                        if (y > height_skitter) {
                            info_slide_thumb.css({left: new_x});
                        }
                    });
                }
               
                self.box_skitter.find('.scroll_thumbs').css({'left':10});
               
                if (width_info_slide < self.settings.width_skitter) {
                    self.box_skitter.find('.info_slide').width('auto');
                    self.box_skitter.find('.box_scroll_thumbs').hide();
                   
                    var class_info = '.info_slide';
                    switch (self.settings.numbers_align) {
                        case 'center' :
                            var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
                            self.box_skitter.find(class_info).css({'left':_vleft});
                            break;
                           
                        case 'right' :
                            self.box_skitter.find(class_info).css({'left':'auto', 'right':'-5px'});
                            break;
                           
                        case 'left' :
                            self.box_skitter.find(class_info).css({'left':'0px'});
                            break;
                    }
                }
               
            }
            else
            {
                var class_info = '.info_slide';
               
                if (self.settings.dots) {
                    self.box_skitter.find('.info_slide').addClass('info_slide_dots').removeClass('info_slide');
                    class_info = '.info_slide_dots';
                }
               
                switch (self.settings.numbers_align) {
                    case 'center' :
                        var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
                        self.box_skitter.find(class_info).css({'left':_vleft});
                        break;
                       
                    case 'right' :
                        self.box_skitter.find(class_info).css({'left':'auto', 'right':'15px'});
                        break;
                       
                    case 'left' :
                        self.box_skitter.find(class_info).css({'left':'15px'});
                        break;
                }
               
                if (!self.settings.dots) {
                    if (self.box_skitter.find('.info_slide').height() > 20) {
                        self.box_skitter.find('.info_slide').hide();
                    }
                }
            }
           
            this.box_skitter.find('ul').hide();
           
            if (this.settings.show_randomly)
            this.settings.images_links.sort(function(a,b) {return Math.random() - 0.5;});
           
            this.settings.image_atual     = this.settings.images_links[0][0];
            this.settings.link_atual     = this.settings.images_links[0][1];
            this.settings.label_atual     = this.settings.images_links[0][3];
            this.settings.target_atual     = this.settings.images_links[0][4];
           
            if (this.settings.images_links.length > 1)
            {
                this.box_skitter.find('.prev_button').click(function() {
                    if (self.settings.is_animating == false) {
                       
                        self.settings.image_i -= 2;
                       
                        if (self.settings.image_i == -2) {
                            self.settings.image_i = self.settings.images_links.length - 2;
                        }
                        else if (self.settings.image_i == -1) {
                            self.settings.image_i = self.settings.images_links.length - 1;
                        }
                       
                        self.jumpToImage(self.settings.image_i);
                    }
                    return false;
                });
               
                this.box_skitter.find('.next_button').click(function() {
                    self.jumpToImage(self.settings.image_i);
                    return false;
                });
               
                self.box_skitter.find('.next_button, .prev_button').bind('mouseover', self.settings.mouseOverButton);
                self.box_skitter.find('.next_button, .prev_button').bind('mouseleave', self.settings.mouseOutButton);
               
                this.box_skitter.find('.image_number').hover(function() {
                    if ($(this).attr('class') != 'image_number image_number_select') {
                        $(this).stop().animate(self.settings.animateNumberOver, 300);
                    }
                }, function(){
                    if ($(this).attr('class') != 'image_number image_number_select') {
                        $(this).stop().animate(self.settings.animateNumberOut, 500);
                    }
                });
               
                this.box_skitter.find('.image_number').click(function(){
                    if ($(this).attr('class') != 'image_number image_number_select') {
                        var imageNumber = parseInt($(this).attr('rel'));
                        self.jumpToImage(imageNumber);
                    }
                    return false;
                });
               
                this.box_skitter.find('.image_number').css(self.settings.animateNumberOut);
                this.box_skitter.find('.image_number:eq(0)').css(self.settings.animateNumberActive);
               
                // Preview with dots
                if (self.settings.preview && self.settings.dots)
                {
                    var preview = $('<div class="preview_slide"><ul></ul></div>');
                   
                    for (var i = 0; i < this.settings.images_links.length; i++) {
                        var li = $('<li></li>');
                        var img = $('<img />');
                        img.attr('src', this.settings.images_links[i][0]);
                        li.append(img);
                        preview.find('ul').append(li);
                    }
                   
                    var width_preview_ul = parseInt(this.settings.images_links.length * 100);
                    preview.find('ul').width(width_preview_ul);
                    $(class_info).append(preview);
                   
                    self.box_skitter.find(class_info).find('.image_number').mouseenter(function() {
                        var _left_info = parseFloat(self.box_skitter.find(class_info).offset().left);
                        var _left_image = parseFloat($(this).offset().left);
                        var _left_preview = (_left_image - _left_info) - 43;
                       
                        var rel = parseInt($(this).attr('rel'));
                        var image_current_preview = self.box_skitter.find('.preview_slide_current img').attr('src');
                        var _left_ul = -(rel * 100);
                       
                        self.box_skitter.find('.preview_slide').find('ul').animate({left: _left_ul}, {duration:200, queue: false, easing: 'easeOutSine'});
                        self.box_skitter.find('.preview_slide').fadeTo(1,1).animate({left: _left_preview}, {duration:200, queue: false});
                    });
                   
                    self.box_skitter.find(class_info).mouseleave(function() {
                        $('.preview_slide').animate({opacity: 'hide'}, {duration: 200, queue: false});
                    });
                }
            }
           
            // Focus
            if (self.settings.focus) {
                self.focusSkitter();
            }
           
            // Constrols
            if (self.settings.controls) {
                self.setControls();
            }
           
            // Progressbar
            if (self.settings.progressbar && self.settings.auto_play) {
                self.addProgressBar();
            }

            // hideTools
            if (self.settings.hideTools) {
                self.hideTools();
            }

            // Navigation keys
            if (self.settings.enable_navigation_keys) {
                self.enableNavigationKeys();
            }
           
            this.loadImages();
        },
       
        /**
         * Load images
         */
        loadImages: function ()
        {
            var self = this;
           
            var loading = $('<div class="loading">Loading</div>');
            this.box_skitter.append(loading);
            var total = this.settings.images_links.length;
           
            var u = 0;
            $.each(this.settings.images_links, function(i)
            {
                var self_il = this;
                var loading = $('<span class="image_loading"></span>');
                loading.css({position:'absolute', top:'-9999em'});
                self.box_skitter.append(loading);
                var img = new Image();
               
                $(img).load(function () {
                    ++u;
                    if (u == total) {
                        self.box_skitter.find('.loading').remove();
                        self.box_skitter.find('.image_loading').remove();
                        self.start();
                    }
                }).error(function () {
                    self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
                    self.box_skitter.html('<p style="color:white;background:black;">Error loading images. One or more images were not found.</p>');
                }).attr('src', self_il[0]);
            });
        },
       
        /**
         * Start skitter
         */
        start: function()
        {
            var self = this;
            var init_pause = false;

            if (this.settings.numbers || this.settings.thumbs) this.box_skitter.find('.info_slide').fadeIn(500);
            if (this.settings.dots) this.box_skitter.find('.info_slide_dots').fadeIn(500);
            if (this.settings.label) this.box_skitter.find('.label_skitter').show();
            if (this.settings.navigation) {
                this.box_skitter.find('.prev_button').fadeIn(500);
                this.box_skitter.find('.next_button').fadeIn(500);
            }
           
            if (self.settings.auto_play) {
                self.startTime();
            }

            self.windowFocusOut();
            self.setLinkAtual();
           
            self.box_skitter.find('.image a img').attr({'src': self.settings.image_atual});
            img_link = self.box_skitter.find('.image a');
            img_link = self.resizeImage(img_link);
            img_link.find('img').fadeIn(1500);
           
            self.setValueBoxText();
            self.showBoxText();
           
            if (self.settings.auto_play) {
                self.stopOnMouseOver();
            }

            var mouseOverInit = function() {
                if (self.settings.stop_over) {
                    init_pause = true;
                    self.settings.is_hover_box_skitter = true;
                    self.clearTimer(true);
                    self.pauseProgressBar();
                }
            };

            self.box_skitter.mouseover(mouseOverInit);
            self.box_skitter.find('.next_button').mouseover(mouseOverInit);
           
            if (self.settings.images_links.length > 1 && !init_pause) {
                if (self.settings.auto_play) {
                    self.timer = setTimeout(function() { self.nextImage(); }, self.settings.interval);
                }
            }
            else {
                self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
            }
           
            if ($.isFunction(self.settings.onLoad)) self.settings.onLoad(self);
        },
       
        /**
         * Jump to image
         */
        jumpToImage: function(imageNumber)
        {
            if (this.settings.is_animating == false) {
                this.settings.elapsedTime = 0;
                this.box_skitter.find('.box_clone').stop();
                this.clearTimer(true);
                this.settings.image_i = Math.floor(imageNumber);
               
                this.box_skitter.find('.image a').attr({'href': this.settings.link_atual});
                this.box_skitter.find('.image_main').attr({'src': this.settings.image_atual});
                this.box_skitter.find('.box_clone').remove();
               
                this.nextImage();
            }
        },
       
        /**
         * Next image
         */
        nextImage: function()
        {
            var self = this;
           
            animations_functions = [
                'cube',
                'cubeRandom',
                'block',
                'cubeStop',
                'cubeStopRandom',
                'cubeHide',
                'cubeSize',
                'horizontal',
                'showBars',
                'showBarsRandom',
                'tube',
                'fade',
                'fadeFour',<