//################################################BLITZ_002.js########################################################################## var BLITZ = { }; // BLITZ //###################################################################################################################################### ( function($) { $.fn.carousel = function(settings) { var config = { nav_items: '#nav-ul____ li', viewable_nav_items: 9, carousel_items: '#carousel-items____ li', interval: 95000, duration: 200, easing: "linear", enable_keys: false, current_class: "current____", start_index: 0, is_mobile: false, webkit_easing: "cubic-bezier(0, 0, 0.2, 1)", carousel_transition_duration: 800 }; if (settings) $.extend(config, settings); var set = 0, touch_event_threshold = 50; //================================================================================================================================================================================= /*this*/$("#carousel____").each ( function(i) { var $this = $(this), $nav_items = $this.find(config.nav_items), $nav_items_parent = $nav_items.parent(), $carousel_items = $("#carousel-items____ li"), $carousel_items_pool = $("#carousel-items-pool____"), $carousel_items_parent = $carousel_items.parent(), carousel_items_len = $carousel_items_pool.find("li").length, timer = null; if(config.start_index > $nav_items.length) { config.start_index = 0; } config.new_current_index = config.start_index; config.index = config.start_index; $nav_items_parent.width(get_nav_item_width($this) * $nav_items.length); // set parent width timer = setInterval ( function() { /*-------------------------------------------------------------------------------------------------------*/ if(!$this.data("is-moving")) { var next_index = (config.index >= carousel_items_len - 1) ? 0 : config.index + 1; go_to($this, next_index, true); } /*-------------------------------------------------------------------------------------------------------*/ }, config.interval ); // start interval timer //================================================================================================================================================================================= /*$this*/$("#carousel____")/*.delegate// events ( config.btn_prev,// PREVIOUS BUTTON "click", function(evt) { evt.preventDefault(); if(!$this.data("is-moving")) { var next_index = (config.index <= 0) ? carousel_items_len - 1 : config.index - 1; go_to($this, next_index, true); } } )*/ //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ .delegate ( config.nav_items, "click", function(evt) { evt.preventDefault(); if(!$this.data("is-moving")) { go_to($this, $nav_items.index(this), true, false); } clearInterval(timer); //------------------------------------------------------------------------------------------------------------------------------- } ); //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ if(config.enable_keys) { enable_key_events($this); } // key events //================================================================================================================================================================================= } ); //================================================================================================================================================================================= // go to item in carousel function go_to($this, index, is_click, is_slide) { var $nav_items = $this.find(config.nav_items), $nav_items_parent = $nav_items.parent(), nav_items_length = $nav_items.length, nav_item_width = get_nav_item_width($this), nav_item_index = index, webkit_secs = config.duration / 1000, xpos; // hardcoding 2 sets (0 and 1) // is there a way to make this dynamic? if((set == 0 && nav_item_index < config.viewable_nav_items) || (set == 1 && nav_item_index < (nav_items_length - config.viewable_nav_items))) { set = 0; nav_item_index = 0; } else if(nav_item_index > nav_items_length - config.viewable_nav_items) { set = 1; nav_item_index = nav_items_length - config.viewable_nav_items; } xpos = -1 * nav_item_width * nav_item_index; $nav_items_parent.animate({"left": xpos}, config.duration, config.easing); set_current($this, index, is_click, is_slide); } //================================================================================================================================================================================= function get_nav_item_width($this) { return $this.find(config.nav_items).outerWidth(true); } //================================================================================================================================================================================= function get_current_nav_item($this) { return $this.find(config.nav_items + "." + config.current_class); } //================================================================================================================================================================================= // set current item in carousel function set_current($this, index, is_click, is_slide) { var $nav_items = $this.find(config.nav_items), $current_nav_item = get_current_nav_item($this); if(config.index != index) { $this.data("is-moving", true); // add current class to index, remove it from siblings $nav_items.eq(index).addClass(config.current_class); $current_nav_item.removeClass(config.current_class); if(!is_slide) { // go to next var xpos = -3840, webkit_transition = -1024, webkit_secs = config.carousel_transition_duration / 1000, $carousel_items = $("#carousel-items____ li"), $carousel_items_parent = $("#carousel-items____"), $carousel_items_pool = $("#carousel-items-pool____"), carousel_items_len = $carousel_items_pool.find("li").length; config.indicies = get_surrounding_indices(config.index); config.new_current_index = index; if(is_click) { config.indicies.next = index; } // go to prev if((config.index == 0 && index == carousel_items_len - 1) || config.index > index) { xpos = 0; webkit_transition = 1024; if(is_click) { config.indicies.prev = index; } } // go to next if(config.index == carousel_items_len - 1 && index == 0) { xpos = -3840; webkit_transition = -1024; if(is_click) { config.indicies.next = index; } } //??????????????????????????????????????????????????????????????????????????????????????????????????????? var abc=$this; if(MOV == 'yes') { var $this = $("#nav-ul____"), nav_item_width = $("#nav-ul____").find("li").width(), //index = $nav_ul.find("li").index(this), slide_to_xpos = index * nav_item_width; $(".drag-slider____").trigger("moveto", [index * nav_item_width, 300, "easeOutQuad"]); } else if(MOV == 'no') { MOV = 'yes'; } var $this=abc; //??????????????????????????????????????????????????????????????????????????????????????????????????????? var $carousel_item_prev = $carousel_items_pool.find("li:eq(" + config.indicies.prev + ")"); var $carousel_item_next = $carousel_items_pool.find("li:eq(" + config.indicies.next + ")"); $carousel_items.eq(0).outerHTML($carousel_item_prev.outerHTML()); $carousel_items.eq(2).outerHTML($carousel_item_next.outerHTML()); config.index = index; $carousel_items_parent.animate({ "margin-left": xpos }, config.carousel_transition_duration, "easeOutQuad", function() { on_transition_end(); }); } config.index = index; // clean up once animation is complete var timer = setTimeout(function() { $this.data("is-moving", false); clearTimeout(timer); }, config.carousel_transition_duration); $this.trigger("change"); //change_skin($this, config.new_current_index); } } //================================================================================================================================================================================= function on_transition_end() { var indicies = get_surrounding_indices(config.index), $carousel_items_pool = $("#carousel-items-pool____"), $carousel_items_parent = $("#carousel-items____"), carousel_item_prev_html = $carousel_items_pool.find("li:eq(" + indicies.prev + ")").outerHTML(), carousel_item_next_html = $carousel_items_pool.find("li:eq(" + indicies.next + ")").outerHTML(), carousel_item_current_html = $carousel_items_pool.find("li:eq(" + config.new_current_index + ")").outerHTML(), items = [carousel_item_prev_html, carousel_item_current_html, carousel_item_next_html]; var recenter_css = {"margin-left": -1920}; $carousel_items_parent.html(items.join("")).css(recenter_css); } //================================================================================================================================================================================= function get_surrounding_indices(index) { var max = $("#carousel-items-pool____").find("li").length - 1, next = index + 1, prev = index - 1; if(next > max) { next = 0; } if(prev < 0) { prev = max; } return {"next": next, "prev": prev}; } //================================================================================================================================================================================= return this; //================================================================================================================================================================================= }; } )(jQuery); //================================================================================================================================================================================= // cross browser outerHTML jQuery.fn.outerHTML = function(val) { if(val) { $(val).insertBefore(this); $(this).remove(); } else { return $('
').append( this.eq(0).clone() ).html(); } }; //##############################################BILTZ_004.js############################################################################ $( function() { //================================================================================================================================================================================= $("#carousel____").carousel({easing: "easeInOutQuad", duration: 800, viewable_nav_items: 9, enable_keys: false }); //================================================================================================================================================================================= } ); //=================================================================================================================================================================================