以下是 jQuery图片自动轮播切换展示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片自动轮播切换展示特效</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/skitter.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.skitter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function() {
$(".box_skitter_large").skitter({
animation: "random",
interval: 3000,
numbers: false,
numbers_align: "right",
hideTools: true,
controls: false,
focus: false,
focus_position: true,
width_label:'340px',
enable_navigation_keys: true,
progressbar: false
});
});
});
</script>
</head>
<body>
<div id="slider-container">
<div class="box_skitter box_skitter_large">
<ul>
<li>
<a href="#"><img src="images/index1.jpg" alt="" /></a>
<div class="label_text">
<h3 class="colortext uppercase"> 帮你展现更美的自已
</h3>
<span>彩妆刷系列轻易打造你的个性妆容！夏末天气也越来越舒爽的，</span>
</div>
</li>
<li>
<a href="#"><img src="images/index2.jpg"alt="" /></a>
<div class="label_text">
<h3 class="colortext uppercase">帮你展现更美的自已
</h3>
<span>专业的刷具能帮你轻松打造自然妆容，你会发现用了专业刷具，
</span>
</div>
</li>
<li>
<a href="#"><img src="images/index3.jpg" alt="" /></a>
<div class="label_text">
<h3 class="colortext uppercase">帮你展现更美的自已
</h3>
<span>彩妆刷让你打造美丽妆容更加得心应手。彩妆刷已从专业造型师手中，
</span>
</div>
</li>
</ul>
</div>
<div id="shadow-img-slider"></div>
</div><!-- end #slider-container -->
</body>
</html>
JS代码(jquery.skitter.js):
/** * jQuery Skitter Slideshow * @name jquery.skitter.js * @description Slideshow * @author Thiago Silva Ferreira - http://thiagosf.net * @version 3.8 * @date August 04,2010 * @update February 02,2011 * @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 hideToolsinterval_in_elements:300,// Interval animation hover elements hideToolsinterval_out_elements:500,// Interval animation out elements hideToolsonLoad: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,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();
}
;
// Shortcutvar $sk = $.skitter;
$sk.fn = $sk.prototype ={
}
;
$sk.fn.extend = $.extend;
$sk.fn.extend({
/** * Init */
setup:function(){
var self = this;
// Fullscreenif (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 htmlthis.box_skitter.append(this.settings.structure);
// Settingsthis.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;
if (!this.settings.numbers && !this.settings.thumbs && !this.settings.dots) this.box_skitter.find('.info_slide').hide();
if (!this.settings.label) this.box_skitter.find('.label_skitter').hide();
if (!this.settings.navigation){
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 labelvar 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 XMLif (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 jsonelse if (this.settings.json){
}
// Load from HTMLelse{
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);
}
);
}
// Thumbsif (self.settings.thumbs && !self.settings.fullscreen){
// New animationself.settings.animateNumberOut ={
opacity:0.2,width:'70px'}
;
self.settings.animateNumberOver ={
opacity:0.5,width:'70px'}
;
self.settings.animateNumberActive ={
opacity:1.0,width:'70px'}
;
self.box_skitter.find('.info_slide').addClass('info_slide_thumb');
var width_info_slide = u * 55 + 75;
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() + 5}
);
self.settings.label = false;
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).height(50).append(copy_info_slide);
// Scrolling with mouse movementvar 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).width()+ parseInt($(this).css('marginLeft'))+ parseInt($(this).css('marginRight'))+ parseInt($(this).css('paddingLeft'))+ parseInt($(this).css('paddingRight'));
}
);
info_slide_thumb.width(width_image+'px');
w_info_slide_thumb = info_slide_thumb.width();
width_valor = this.settings.width_skitter;
width_valor = 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_valor;
new_x = -((novo_width * x) / width_valor);
if (new_x > 0) new_x = 0;
if (new_x < -(w_info_slide_thumb - width_skitter - 5)) new_x = -(w_info_slide_thumb - width_skitter - 5);
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.mouseOverButton);
self.box_skitter.find('.next_button,.prev_button').bind('mouseleave',self.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);
// Previewif (self.settings.preview && self.settings.dots){
var preview = $('<div id="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}
);
}
);
}
}
// Focusif (self.settings.focus){
self.focusSkitter();
}
// Constrolsif (self.settings.controls){
self.setControls();
}
// Progressbarif (self.settings.progressbar){
self.addProgressBar();
}
// hideToolsif (self.settings.hideTools){
self.hideTools();
}
// Navigation keysif (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;
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();
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){
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();
}
,/** * 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','paralell','blind','blindHeight','blindWidth','directionTop','directionBottom','directionRight','directionLeft','cubeSpread','glassCube','glassBlock','circles','circlesInside','circlesRotate','cubeShow','upBars','downBars','hideBars','swapBars','swapBarsBack'];
if (self.settings.progressbar) self.hideProgressBar();
animation_type = (this.settings.animation == '' && this.settings.images_links[this.settings.image_i][2]) ?this.settings.images_links[this.settings.image_i][2]:(this.settings.animation == '' ? 'default':this.settings.animation);
// RandomUniqueif (animation_type == 'randomSmart'){
if (!this.settings.random_ia){
animations_functions.sort(function(){
return 0.5 - Math.random();
}
);
this.settings.random_ia = animations_functions;
}
animation_type = this.settings.random_ia[this.settings.image_i];
}
// Randomelse if (animation_type == 'random'){
var random_id = parseInt(Math.random() * animations_functions.length);
animation_type = animations_functions[random_id];
}
switch (animation_type){
case 'cube':this.animationCube();
break;
case 'cubeRandom':this.animationCube({
random:true}
);
break;
case 'block':this.animationBlock();
break;
case 'cubeStop':this.animationCubeStop();
break;
case 'cubeStopRandom':this.animationCubeStop({
random:true}
);
break;
case 'cubeHide':this.animationCubeHide();
break;
case 'cubeSize':this.animationCubeSize();
break;
case 'horizontal':this.animationHorizontal();
break;
case 'showBars':this.animationShowBars();
break;
case 'showBarsRandom':this.animationShowBars({
random:true}
);
break;
case 'tube':this.animationTube();
break;
case 'fade':this.animationFade();
break;
case 'fadeFour':this.animationFadeFour();
break;
case 'paralell':this.animationParalell();
break;
case 'blind':this.animationBlind();
break;
case 'blindHeight':this.animationBlindDimension({
height:true}
);
break;
case 'blindWidth':this.animationBlindDimension({
height:false,time_animate:400,delay:50}
);
break;
case 'directionTop':this.animationDirection({
direction:'top'}
);
break;
case 'directionBottom':this.animationDirection({
direction:'bottom'}
);
break;
case 'directionRight':this.animationDirection({
direction:'right',total:5}
);
break;
case 'directionLeft':this.animationDirection({
direction:'left',total:5}
);
break;
case 'cubeSpread':this.animationCubeSpread();
break;
case 'cubeJelly':this.animationCubeJelly();
break;
case 'glassCube':this.animationGlassCube();
break;
case 'glassBlock':this.animationGlassBlock();
break;
case 'circles':this.animationCircles();
break;
case 'circlesInside':this.animationCirclesInside();
break;
case 'circlesRotate':this.animationCirclesRotate();
break;
case 'cubeShow':this.animationCubeShow();
break;
case 'upBars':this.animationDirectionBars({
direction:'top'}
);
break;
case 'downBars':this.animationDirectionBars({
direction:'bottom'}
);
break;
case 'hideBars':this.animationHideBars();
break;
case 'swapBars':this.animationSwapBars();
break;
case 'swapBarsBack':this.animationSwapBars({
easing:'easeOutBack'}
);
break;
default:this.animationTube();
break;
}
}
,animationCube:function (options){
var self = this;
var options = $.extend({
}
,{
random:false}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutExpo':this.settings.easing_default;
var time_animate = 700 / this.settings.velocity;
this.setActualLevel();
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var init_top= this.settings.height_skitter + 200;
var init_left= this.settings.height_skitter + 200;
var col_t = 0;
var col = 0;
for (i = 0;
i < total;
i++){
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t) + (col_t * 150);
var _vleft= -self.settings.width_skitter;
//var _vleft= (init_left + (width_box * col)) + (col * 50);
var _vtop_image= -(height_box * col_t);
var _vleft_image= -(width_box * col);
var _btop= (height_box * col_t);
var _bleft= (width_box * col);
var box_clone= this.getBoxClone();
box_clone.hide();
var delay_time = 50 * (i);
if (options.random){
delay_time = 40 * (col);
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
}
else{
time_animate = 500;
//box_clone.css({
left:(this.settings.width_skitter / 2),top:this.settings.height_skitter + 50,width:width_box,height:height_box}
);
box_clone.css({
left:(this.settings.width_skitter) + (width_box * i),top:this.settings.height_skitter + (height_box * i),width:width_box,height:height_box}
);
}
//box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
//box_clone.find('img').css({
left:_vleft_image+100,top:_vtop_image}
);
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.show().delay(delay_time).animate({
top:_btop+'px',left:_bleft+'px'}
,time_animate,easing,callback);
if (options.random){
box_clone.find('img').css({
left:_vleft_image+100,top:_vtop_image+50}
);
box_clone.find('img').delay(delay_time+(time_animate/2)).animate({
left:_vleft_image,top:_vtop_image}
,1000,'easeOutBack');
}
else{
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
box_clone.find('img').delay(delay_time+(time_animate/2)).fadeTo(100,0.5).fadeTo(300,1);
}
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationBlock:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 15));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= (this.settings.height_skitter);
for (i = 0;
i < total;
i++){
var _bleft = (width_box * (i));
var _btop = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:this.settings.width_skitter + 100,top:0,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:-(width_box * i)}
);
this.addBoxClone(box_clone);
var delay_time = 80 * (i);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
//box_clone.delay(delay_time).animate({
top:_btop,left:_bleft,opacity:'show'}
,time_animate,easing,callback);
box_clone.show().delay(delay_time).animate({
top:_btop,left:_bleft}
,time_animate,easing);
box_clone.find('img').hide().delay(delay_time+100).animate({
opacity:'show'}
,time_animate+300,easing,callback);
}
}
,animationCubeStop:function(options){
var self = this;
var options = $.extend({
}
,{
random:false}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInQuad':this.settings.easing_default;
var time_animate = 300 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var division_w = Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h = Math.ceil(this.settings.height_skitter / (this.settings.width_skitter / 8));
var total = division_w * division_h;
var width_box = Math.ceil(this.settings.width_skitter / division_w);
var height_box = Math.ceil(this.settings.height_skitter / division_h);
var init_top = 0;
var init_left = 0;
var col_t = 0;
var col = 0;
var _ftop = this.settings.width_skitter / 16;
for (i = 0;
i < total;
i++){
init_top = (i % 2 == 0) ? init_top:-init_top;
init_left = (i % 2 == 0) ? init_left:-init_left;
var _vtop = init_top + (height_box * col_t);
var _vleft = (init_left + (width_box * col));
var _vtop_image = -(height_box * col_t);
var _vleft_image = -(width_box * col);
var _btop = _vtop - _ftop;
var _bleft = _vleft - _ftop;
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 50 * i;
if (options.random){
time_animate = 1000 / this.settings.velocity;
_btop = _vtop;
_bleft = _vleft;
delay_time = 30 * (Math.random() * 30);
}
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'hide',top:_btop+'px',left:_bleft+'px'}
,time_animate,easing,callback);
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationCubeHide:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var init_top= 0;
var init_left= 0;
var col_t= 0;
var col= 0;
for (i = 0;
i < total;
i++){
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t);
var _vleft= (init_left + (width_box * col));
var _vtop_image= -(height_box * col_t);
var _vleft_image= -(width_box * col);
var _btop= _vtop - 50;
var _bleft= _vleft - 50;
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 50 * i;
delay_time = (i == (total - 1)) ? (total * 50):delay_time;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'hide'}
,time_animate,easing,callback);
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationCubeJelly:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInBack':this.settings.easing_default;
var time_animate = 300 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var init_top= 0;
var init_left= 0;
var col_t= 0;
var col= 0;
var u= -1;
for (i = 0;
i < total;
i++){
if (col % 2 != 0){
if (col_t == 0){
u = u + division_h + 1;
}
u--;
}
else{
if (col > 0 && col_t == 0){
u = u + 2;
}
u++;
}
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t);
var _vleft= (init_left + (width_box * col));
var _vtop_image= -(height_box * col_t);
var _vleft_image= -(width_box * col);
var _btop= _vtop - 50;
var _bleft= _vleft - 50;
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = (50 * i);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
width:'+=100px',height:'+=100px',top:'-=20px',left:'-=20px',opacity:'hide'}
,time_animate,easing,callback);
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationCubeSize:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInOutQuad':this.settings.easing_default;
var time_animate = 600 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var init_top= 0;
var init_left= 0;
var col_t= 0;
var col= 0;
var _ftop= Math.ceil(this.settings.width_skitter / 6);
for (i = 0;
i < total;
i++){
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t);
var _vleft= (init_left + (width_box * col));
var _vtop_image= -(height_box * col_t);
var _vleft_image= -(width_box * col);
var _btop= _vtop - _ftop;
var _bleft= _vleft - _ftop;
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_vleft,top:_vtop,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 50 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'hide',width:'hide',height:'hide',top:_vtop+(width_box*1.5),left:_vleft+(height_box*1.5)}
,time_animate,easing,callback);
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationHorizontal:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutExpo':this.settings.easing_default;
var time_animate = 700 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 7));
var width_box= (this.settings.width_skitter);
var height_box= Math.ceil(this.settings.height_skitter / total);
for (i = 0;
i < total;
i++){
var _bleft = (i % 2 == 0 ? '':'') + width_box;
var _btop = (i * height_box);
var box_clone = this.getBoxClone();
box_clone.css({
left:_bleft+'px',top:_btop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:0,top:-_btop}
);
this.addBoxClone(box_clone);
var delay_time = 90 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop,left:0}
,time_animate,easing,callback);
}
}
,animationShowBars:function(options){
var self = this;
var options = $.extend({
}
,{
random:false}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 400 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= (this.settings.height_skitter);
for (i = 0;
i < total;
i++){
var _bleft = (width_box * (i));
var _btop = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:_bleft,top:_btop - 50,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:-(width_box * i),top:0}
);
this.addBoxClone(box_clone);
if (options.random){
var random = this.getRandom(total);
var delay_time = 50 * random;
delay_time = (i == (total - 1)) ? (50 * total):delay_time;
}
else{
var delay_time = 70 * (i);
time_animate = time_animate - (i * 2);
}
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px'}
,time_animate,easing,callback);
}
}
,animationTube:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutElastic':this.settings.easing_default;
var time_animate = 600 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
for (i = 0;
i<total;
i++){
var _btop = 0;
var _vtop = height_box;
var vleft = width_box * i;
var box_clone = this.getBoxClone();
box_clone.css({
left:vleft,top:_vtop,height:height_box,width:width_box}
);
box_clone.find('img').css({
left:-(vleft)}
);
this.addBoxClone(box_clone);
var random = this.getRandom(total);
var delay_time = 30 * random;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.show().delay(delay_time).animate({
top:_btop}
,time_animate,easing,callback);
}
}
,animationFade:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 800 / this.settings.velocity;
this.setActualLevel();
var width_box= this.settings.width_skitter;
var height_box= this.settings.height_skitter;
var total= 2;
for (i = 0;
i<total;
i++){
var _vtop = 0;
var _vleft = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:_vleft,top:_vtop,width:width_box,height:height_box}
);
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.animate({
opacity:'show',left:0,top:0}
,time_animate,easing,callback);
}
}
,animationFadeFour:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
this.setActualLevel();
var width_box= this.settings.width_skitter;
var height_box= this.settings.height_skitter;
var total= 4;
for (i = 0;
i<total;
i++){
if (i == 0){
var _vtop = '-100px';
var _vleft = '-100px';
}
else if (i == 1){
var _vtop = '-100px';
var _vleft = '100px';
}
else if (i == 2){
var _vtop = '100px';
var _vleft = '-100px';
}
else if (i == 3){
var _vtop = '100px';
var _vleft = '100px';
}
var box_clone = this.getBoxClone();
box_clone.css({
left:_vleft,top:_vtop,width:width_box,height:height_box}
);
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.animate({
opacity:'show',left:0,top:0}
,time_animate,easing,callback);
}
}
,animationParalell:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 400 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
for (i = 0;
i < total;
i++){
var _bleft = (width_box * (i));
var _btop = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:_bleft,top:_btop - this.settings.height_skitter,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:-(width_box * i),top:0}
);
this.addBoxClone(box_clone);
var delay_time;
if (i <= ((total / 2) - 1)){
delay_time = 1400 - (i * 200);
}
else if (i > ((total / 2) - 1)){
delay_time = ((i - (total / 2)) * 200);
}
delay_time = delay_time / 2.5;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
top:_btop+'px',left:_bleft+'px',opacity:'show'}
,time_animate,easing,callback);
}
}
,animationBlind:function(options){
var self = this;
var options = $.extend({
}
,{
height:false}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 400 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
for (i = 0;
i < total;
i++){
var _bleft = (width_box * (i));
var _btop = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:_bleft,top:_btop,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:-(width_box * i),top:0}
);
this.addBoxClone(box_clone);
var delay_time;
if (!options.height){
if (i <= ((total / 2) - 1)){
delay_time = 1400 - (i * 200);
}
else if (i > ((total / 2) - 1)){
delay_time = ((i - (total / 2)) * 200);
}
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
}
else{
if (i <= ((total / 2) - 1)){
delay_time = 200 + (i * 200);
}
else if (i > ((total / 2) - 1)){
delay_time = (((total / 2) - i) * 200) + (total * 100);
}
var callback = (i == (total / 2)) ? function(){
self.finishAnimation();
}
:'';
}
delay_time = delay_time / 2.5;
if (!options.height){
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px',width:'show'}
,time_animate,easing,callback);
}
else{
time_animate = time_animate + (i * 2);
var easing = 'easeOutQuad';
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px',height:'show'}
,time_animate,easing,callback);
}
}
}
,animationBlindDimension:function(options){
var self = this;
var options = $.extend({
}
,{
height:true,time_animate:500,delay:100}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = options.time_animate / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
for (i = 0;
i < total;
i++){
var _bleft = (width_box * (i));
var _btop = 0;
var box_clone = this.getBoxClone();
box_clone.css({
left:_bleft,top:_btop,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:-(width_box * i),top:0}
);
this.addBoxClone(box_clone);
var delay_time = options.delay * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
if (!options.height){
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px',width:'show'}
,time_animate,easing,callback);
}
else{
var easing = 'easeOutQuad';
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px',height:'show'}
,time_animate,easing,callback);
}
}
}
,animationDirection:function(options){
var self = this;
var options = $.extend({
}
,{
direction:'top',delay_type:'sequence',total:7}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInOutExpo':this.settings.easing_default;
var time_animate = 1200 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
this.box_skitter.find('.image_main').hide();
var total= options.total;
for (i = 0;
i < total;
i++){
switch (options.direction){
default:case 'top':var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
var _itopc= 0;
var _ileftc= (width_box * i);
var _ftopc= -height_box;
var _fleftc= _ileftc;
var _itopn= height_box;
var _ileftn= _ileftc;
var _ftopn= 0;
var _fleftn= _ileftc;
var _vtop_image= 0;
var _vleft_image= -_ileftc;
break;
case 'bottom':var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
var _itopc= 0;
var _ileftc= (width_box * i);
var _ftopc= height_box;
var _fleftc= _ileftc;
var _itopn= -height_box;
var _ileftn= _ileftc;
var _ftopn= 0;
var _fleftn= _ileftc;
var _vtop_image= 0;
var _vleft_image= -_ileftc;
break;
case 'right':var width_box= this.settings.width_skitter;
var height_box= Math.ceil(this.settings.height_skitter / total);
var _itopc= (height_box * i);
var _ileftc= 0;
var _ftopc= _itopc;
var _fleftc= width_box;
var _itopn= _itopc;
var _ileftn= -_fleftc;
var _ftopn= _itopc;
var _fleftn= 0;
var _vtop_image= -_itopc;
var _vleft_image= 0;
break;
case 'left':var width_box= this.settings.width_skitter;
var height_box= Math.ceil(this.settings.height_skitter / total);
var _itopc= (height_box * i);
var _ileftc= 0;
var _ftopc= _itopc;
var _fleftc= -width_box;
var _itopn= _itopc;
var _ileftn= -_fleftc;
var _ftopn= _itopc;
var _fleftn= 0;
var _vtop_image= -_itopc;
var _vleft_image= 0;
break;
}
switch (options.delay_type){
case 'zebra':default:var delay_time = (i % 2 == 0) ? 0:150;
break;
case 'random':var delay_time = 30 * (Math.random() * 30);
break;
case 'sequence':var delay_time = i * 100;
break;
}
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
box_clone.css({
top:_itopc,left:_ileftc,width:width_box,height:height_box}
);
this.addBoxClone(box_clone);
box_clone.show();
box_clone.delay(delay_time).animate({
top:_ftopc,left:_fleftc}
,time_animate,easing);
// Next imagevar box_clone_next = this.getBoxClone();
box_clone_next.find('img').css({
left:_vleft_image,top:_vtop_image}
);
box_clone_next.css({
top:_itopn,left:_ileftn,width:width_box,height:height_box}
);
this.addBoxClone(box_clone_next);
box_clone_next.show();
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone_next.delay(delay_time).animate({
top:_ftopn,left:_fleftn}
,time_animate,easing,callback);
}
}
,animationCubeSpread:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 700 / this.settings.velocity;
this.setActualLevel();
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.width_skitter / 8));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var init_top= 0;
var init_left= 0;
var col_t= 0;
var col= 0;
var order= new Array;
var spread= new Array;
// Make orderfor (i = 0;
i < total;
i++){
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t);
var _vleft= (init_left + (width_box * col));
order[i] = [_vtop,_vleft];
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
// Reset col and col_tcol_t = 0;
col = 0;
// Make array for spreadfor (i = 0;
i < total;
i++){
spread[i] = i;
}
;
// Shuffle arrayvar spread = self.shuffleArray(spread);
for (i = 0;
i < total;
i++){
init_top= (i % 2 == 0) ? init_top:-init_top;
init_left= (i % 2 == 0) ? init_left:-init_left;
var _vtop= init_top + (height_box * col_t);
var _vleft= (init_left + (width_box * col));
var _vtop_image= -(height_box * col_t);
var _vleft_image= -(width_box * col);
var _btop= _vtop;
var _bleft= _vleft;
_vtop= order[spread[i]][0];
_vleft= order[spread[i]][1];
var box_clone= this.getBoxClone();
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
var delay_time = 30 * (Math.random() * 30);
if (i == (total-1)) delay_time = 30 * 30;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
opacity:'show',top:_btop+'px',left:_bleft+'px'}
,time_animate,easing,callback);
col_t++;
if (col_t == division_h){
col_t = 0;
col++;
}
}
}
,animationGlassCube:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutExpo':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10)) * 2;
var width_box= Math.ceil(this.settings.width_skitter / total) * 2;
var height_box= (this.settings.height_skitter) / 2;
var col= 0;
for (i = 0;
i < total;
i++){
mod = (i % 2) == 0 ? true:false;
var _ileft = (width_box * (col));
var _itop = (mod) ? -self.settings.height_skitter:self.settings.height_skitter;
var _fleft = (width_box * (col));
var _ftop = (mod) ? 0:(height_box);
var _bleft = -(width_box * col);
var _btop = (mod) ? 0:-(height_box);
var delay_time = 120 * col;
var box_clone = this.getBoxClone();
box_clone.css({
left:_ileft,top:_itop,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_bleft + (width_box / 1.5),top:_btop}
).delay(delay_time).animate({
left:_bleft,top:_btop}
,(time_animate * 1.9),'easeOutQuad');
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.show().delay(delay_time).animate({
top:_ftop,left:_fleft}
,time_animate,easing,callback);
if ((i % 2) != 0) col++;
}
}
,animationGlassBlock:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutExpo':this.settings.easing_default;
var time_animate = 700 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= (this.settings.height_skitter);
for (i = 0;
i < total;
i++){
var _ileft = (width_box * (i));
var _itop = 0;
var _fleft = (width_box * (i));
var _ftop = 0;
var _bleft = -(width_box * (i));
var _btop = 0;
var delay_time = 100 * i;
var box_clone = this.getBoxClone();
box_clone.css({
left:_ileft,top:_itop,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_bleft + (width_box / 1.5),top:_btop}
).delay(delay_time).animate({
left:_bleft,top:_btop}
,(time_animate * 1.1),'easeInOutQuad');
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
top:_ftop,left:_fleft,opacity:'show'}
,time_animate,easing,callback);
}
}
,animationCircles:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
this.setActualLevel();
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var size_box= 100;
var radius= Math.sqrt(Math.pow((this.settings.width_skitter),2) + Math.pow((this.settings.height_skitter),2));
var radius= Math.ceil(radius);
for (i = 0;
i < total;
i++){
var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
var _fleft = _ileft;
var _ftop = _itop;
var box_clone = null;
// if ($.browser.mozilla){
//box_clone = this.getBoxClone();
//box_clone.css({
left:_ileft,top:_itop,width:size_box,height:size_box}
).css3({
//'border-radius':radius+'px'//}
);
//box_clone.find('img').css({
left:-_ileft,top:-_itop}
);
//}
// else{
box_clone = this.getBoxCloneBackground({
image:self.settings.image_atual,left:_ileft,top:_itop,width:size_box,height:size_box,position:{
top:-_itop,left:-_ileft}
}
).css3({
'border-radius':radius+'px'}
);
//}
// var box_clone = this.getBoxClone();
// box_clone.css({
left:_ileft,top:_itop,width:size_box,height:size_box}
).css3({
//'border-radius':radius+'px'//}
);
// box_clone.find('img').css({
left:-_ileft,top:-_itop}
);
size_box += 100;
this.addBoxClone(box_clone);
var delay_time = 70 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
top:_ftop,left:_fleft,opacity:'show'}
,time_animate,easing,callback);
}
}
,animationCirclesInside:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var radius= Math.sqrt(Math.pow((this.settings.width_skitter),2) + Math.pow((this.settings.height_skitter),2));
var radius= Math.ceil(radius);
var size_box= radius;
for (i = 0;
i < total;
i++){
var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
var _fleft = _ileft;
var _ftop = _itop;
var box_clone = null;
// if ($.browser.mozilla){
//box_clone = this.getBoxCloneImgOld(image_old);
//box_clone.css({
left:_ileft,top:_itop,width:size_box,height:size_box}
).css3({
//'border-radius':radius+'px'//}
);
//box_clone.find('img').css({
left:-_ileft,top:-_itop}
);
//}
// else{
box_clone = this.getBoxCloneBackground({
image:image_old,left:_ileft,top:_itop,width:size_box,height:size_box,position:{
top:-_itop,left:-_ileft}
}
).css3({
'border-radius':radius+'px'}
);
//}
// var box_clone = this.getBoxCloneImgOld(image_old);
// box_clone.css({
left:_ileft,top:_itop,width:size_box,height:size_box}
).css3({
//'border-radius':radius+'px'//}
);
// box_clone.find('img').css({
left:-_ileft,top:-_itop}
);
size_box -= 100;
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 70 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
top:_ftop,left:_fleft,opacity:'hide'}
,time_animate,easing,callback);
}
}
,animationCirclesRotate:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var total= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var radius= Math.sqrt(Math.pow((this.settings.width_skitter),2) + Math.pow((this.settings.height_skitter),2));
var radius= Math.ceil(radius);
var size_box= radius;
for (i = 0;
i < total;
i++){
var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
var _fleft = _ileft;
var _ftop = _itop;
var box_clone = null;
if ($.browser.mozilla){
box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_ileft,top:_itop,width:size_box,height:size_box}
).css3({
'border-radius':radius+'px'}
);
box_clone.find('img').css({
left:-_ileft,top:-_itop}
);
}
else{
box_clone = this.getBoxCloneBackground({
image:image_old,left:_ileft,top:_itop,width:size_box,height:size_box,position:{
top:-_itop,left:-_ileft}
}
).css3({
'border-radius':radius+'px'}
);
}
size_box -= 100;
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 100 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
var _rotate = (i % 2 == 0) ? '20deg':'-20deg';
box_clone.delay(delay_time).animate({
top:_ftop,left:_fleft,opacity:'hide',rotate:_rotate}
,time_animate,easing,callback);
}
}
,animationCubeShow:function(options){
var self = this;
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutQuad':this.settings.easing_default;
var time_animate = 400 / this.settings.velocity;
this.setActualLevel();
var division_w= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
var division_h= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 4));
var total= division_w * division_h;
var width_box= Math.ceil(this.settings.width_skitter / division_w);
var height_box= Math.ceil(this.settings.height_skitter / division_h);
var last= false;
var _btop= 0;
var _bleft= 0;
var line= 0;
var col= 0;
for (i = 0;
i < total;
i++){
_btop = height_box * line;
_bleft = width_box * col;
var delay_time = 30 * (i);
var box_clone= this.getBoxClone();
box_clone.css({
left:_bleft,top:_btop,width:width_box,height:height_box}
).hide();
box_clone.find('img').css({
left:-_bleft,top:-_btop}
);
this.addBoxClone(box_clone);
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
width:'show',height:'show'}
,time_animate,easing,callback);
line++;
if (line == division_h){
line = 0;
col++;
}
}
}
,animationDirectionBars:function(options){
var self = this;
var options = $.extend({
}
,{
direction:'top'}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeInOutQuad':this.settings.easing_default;
var time_animate = 400 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var total= 12;
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
var _ftop= (options.direction == 'top') ? -height_box:height_box;
for (i = 0;
i < total;
i++){
var _vtop= 0;
var _vleft= (width_box * i);
var _vtop_image= 0;
var _vleft_image= -(width_box * i);
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
this.addBoxClone(box_clone);
box_clone.show();
var delay_time = 70 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
top:_ftop}
,time_animate,easing,callback);
}
}
,animationHideBars:function(options){
var self = this;
var options = $.extend({
}
,{
random:false}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? 'easeOutCirc':this.settings.easing_default;
var time_animate = 700 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
var division_w = Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
var total = division_w;
var width_box = Math.ceil(this.settings.width_skitter / division_w);
var height_box = this.settings.height_skitter;
for (i = 0;
i < total;
i++){
var _vtop = 0;
var _vleft = width_box * i;
var _vtop_image = 0;
var _vleft_image = -(width_box * i);
var _fleft = '+='+width_box;
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({
left:0,top:0,width:width_box,height:height_box}
);
box_clone.find('img').css({
left:_vleft_image,top:_vtop_image}
);
var box_clone_main = this.getBoxCloneImgOld(image_old);
box_clone_main.css({
left:_vleft+'px',top:_vtop+'px',width:width_box,height:height_box}
);
box_clone_main.html(box_clone);
this.addBoxClone(box_clone_main);
box_clone.show();
box_clone_main.show();
var delay_time = 50 * i;
var callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
box_clone.delay(delay_time).animate({
left:_fleft}
,time_animate,easing,callback);
}
}
,animationSwapBars:function(options){
var self = this;
var options = $.extend({
}
,{
direction:'top',delay_type:'sequence',total:7,easing:'easeOutCirc'}
,options ||{
}
);
this.settings.is_animating = true;
var easing = (this.settings.easing_default == '') ? options.easing:this.settings.easing_default;
var time_animate = 500 / this.settings.velocity;
var image_old = this.box_skitter.find('.image_main').attr('src');
this.setActualLevel();
this.setLinkAtual();
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
this.box_skitter.find('.image_main').hide();
var total= options.total;
for (i = 0;
i < total;
i++){
var width_box= Math.ceil(this.settings.width_skitter / total);
var height_box= this.settings.height_skitter;
var _itopc= 0;
var _ileftc= (width_box * i);
var _ftopc= -height_box;
var _fleftc= _ileftc + width_box;
var _itopn= height_box;
var _ileftn= _ileftc;
var _ftopn= 0;
var _fleftn= _ileftc;
var _vtop_image= 0;
var _vleft_image= -_ileftc;
switch (options.delay_type){
case 'zebra':default:var delay_time = (i % 2 == 0) ? 0:150;
break;
case 'random':var delay_time = 30 * (Math.random() * 30);
break;
case 'sequence':var delay_time = i * 100;
break;
}
// Old imagevar box_clone = this.getBoxCloneImgOld(image_old);
box_clone.find('img').css({
left:_vleft_image,top:0}
);
box_clone.css({
top:0,left:0,width:width_box,height:height_box}
);
// Next imagevar box_clone_next = this.getBoxClone();
box_clone_next.find('img').css({
left:_vleft_image,top:0}
);
box_clone_next.css({
top:0,left:-width_box,width:width_box,height:height_box}
);
// Container box imagesvar box_clone_container = this.getBoxClone();
box_clone_container.html('').append(box_clone).append(box_clone_next);
box_clone_container.css({
top:0,left:_ileftc,width:width_box,height:height_box}
);
// Add containuerthis.addBoxClone(box_clone_container);
// Show boxesbox_clone_container.show();
box_clone.show();
box_clone_next.show();
// Callbackvar callback = (i == (total - 1)) ? function(){
self.finishAnimation();
}
:'';
// Animationsbox_clone.delay(delay_time).animate({
left:width_box}
,time_animate,easing);
box_clone_next.delay(delay_time).animate({
left:0}
,time_animate,easing,callback);
}
}
,// End animations ----------------------// Finish animationfinishAnimation:function (options){
var self = this;
this.box_skitter.find('.image_main').show();
this.showBoxText();
this.settings.is_animating = false;
this.box_skitter.find('.image_main').attr({
'src':this.settings.image_atual}
);
this.box_skitter.find('.image a').attr({
'href':this.settings.link_atual}
);
if (!this.settings.is_hover_box_skitter && !this.settings.is_paused && !this.settings.is_blur){
this.timer = setTimeout(function(){
self.completeMove();
}
,this.settings.interval);
}
self.startTime();
}
,// Complete movecompleteMove:function (){
this.clearTimer(true);
this.box_skitter.find('.box_clone').remove();
if (!this.settings.is_paused && !this.settings.is_blur) this.nextImage();
}
,// Actual config for animationsetActualLevel:function(){
if ($.isFunction(this.settings.imageSwitched)) this.settings.imageSwitched(this.settings.image_i,this);
this.setImageLink();
this.addClassNumber();
this.hideBoxText();
this.increasingImage();
}
,// Set image and linksetImageLink:function(){
var name_image = this.settings.images_links[this.settings.image_i][0];
var link_image = this.settings.images_links[this.settings.image_i][1];
var label_image = this.settings.images_links[this.settings.image_i][3];
var target_link = this.settings.images_links[this.settings.image_i][4];
this.settings.image_atual = name_image;
this.settings.link_atual = link_image;
this.settings.label_atual = label_image;
this.settings.target_atual = target_link;
}
,// Add class for numberaddClassNumber:function (){
var self = this;
this.box_skitter.find('.image_number_select').animate(self.settings.animateNumberOut,500).removeClass('image_number_select');
$('#image_n_'+(this.settings.image_i+1)+'_'+self.number_skitter).animate(self.settings.animateNumberActive,700).addClass('image_number_select');
}
,// Increment image_iincreasingImage:function(){
this.settings.image_i++;
if (this.settings.image_i == this.settings.images_links.length){
this.settings.image_i = 0;
}
}
,// Get box clonegetBoxClone:function(){
if (this.settings.link_atual != '#'){
var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+this.settings.image_atual+'" /></a>');
}
else{
var img_clone = $('<img src="'+this.settings.image_atual+'" />');
}
img_clone = this.resizeImage(img_clone);
var box_clone = $('<div class="box_clone"></div>');
box_clone.append(img_clone);
return box_clone;
}
,// Get box clonegetBoxCloneImgOld:function(image_old){
if (this.settings.link_atual != '#'){
var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+image_old+'" /></a>');
}
else{
var img_clone = $('<img src="'+image_old+'" />');
}
img_clone = this.resizeImage(img_clone);
var box_clone = $('<div class="box_clone"></div>');
box_clone.append(img_clone);
return box_clone;
}
,// Redimensiona imagemresizeImage:function(img_clone){
if (this.settings.fullscreen){
img_clone.find('img').height(this.settings.height_skitter);
}
return img_clone;
}
,// Add box clone in box_skitteraddBoxClone:function(box_clone){
this.box_skitter.find('.container_skitter').append(box_clone);
}
,// Get accepts easinggetEasing:function(easing){
var easing_accepts = ['easeInQuad','easeOutQuad','easeInOutQuad','easeInCubic','easeOutCubic','easeInOutCubic','easeInQuart','easeOutQuart','easeInOutQuart','easeInQuint','easeOutQuint','easeInOutQuint','easeInSine','easeOutSine','easeInOutSine','easeInExpo','easeOutExpo','easeInOutExpo','easeInCirc','easeOutCirc','easeInOutCirc','easeInElastic','easeOutElastic','easeInOutElastic','easeInBack','easeOutBack','easeInOutBack','easeInBounce','easeOutBounce','easeInOutBounce',];
if (jQuery.inArray(easing,easing_accepts) > 0){
return easing;
}
else{
return '';
}
}
,// Get random numbergetRandom:function (i){
return Math.floor(Math.random() * i);
}
,// Set value for textsetValueBoxText:function (){
this.box_skitter.find('.label_skitter').html(this.settings.label_atual);
}
,// Show box textshowBoxText:function (){
var self = this;
if (this.settings.label_atual != undefined && this.settings.label_atual != '' && self.settings.label){
self.box_skitter.find('.label_skitter').slideDown(400);
}
}
,// Hide box texthideBoxText:function (){
var self = this;
this.box_skitter.find('.label_skitter').slideUp(200,function(){
self.setValueBoxText();
}
);
}
,// Stop time to get over box_skitterstopOnMouseOver:function (){
var self = this;
var opacity_elements = self.settings.opacity_elements;
var interval_in_elements = self.settings.interval_in_elements;
var interval_out_elements = self.settings.interval_out_elements;
self.box_skitter.hover(function(){
if (self.settings.stop_over) self.settings.is_hover_box_skitter = true;
if (!self.settings.is_paused_time){
self.pauseTime();
}
if (self.settings.hideTools){
if (self.settings.numbers){
self.box_skitter.find('.info_slide').show().css({
opacity:0}
).animate({
opacity:opacity_elements}
,interval_in_elements);
}
if (self.settings.navigation){
self.box_skitter.find('.prev_button').show().css({
opacity:0}
).animate({
opacity:opacity_elements}
,interval_in_elements);
self.box_skitter.find('.next_button').show().css({
opacity:0}
).animate({
opacity:opacity_elements}
,interval_in_elements);
}
if (self.settings.focus && !self.settings.foucs_active){
self.box_skitter.find('.focus_button').stop().show().css({
opacity:0}
).animate({
opacity:opacity_elements}
,200);
}
if (self.settings.controls){
self.box_skitter.find('.play_pause_button').stop().show().css({
opacity:0}
).animate({
opacity:opacity_elements}
,200);
}
}
self.clearTimer(true);
if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools){
self.box_skitter.find('.focus_button').stop().animate({
opacity:1}
,200);
}
if (self.settings.controls && !self.settings.hideTools){
self.box_skitter.find('.play_pause_button').stop().animate({
opacity:1}
,200);
}
}
,function(){
if (self.settings.stop_over) self.settings.is_hover_box_skitter = false;
if (self.settings.elapsedTime == 0 && !self.settings.is_animating && !self.settings.is_paused){
self.startTime();
}
else if (!self.settings.is_paused){
self.resumeTime();
}
if (self.settings.hideTools){
if (self.settings.numbers){
self.box_skitter.find('.info_slide').queue("fx",[]).show().css({
opacity:opacity_elements}
).animate({
opacity:0}
,interval_out_elements);
}
if (self.settings.navigation){
self.box_skitter.find('.prev_button').queue("fx",[]).show().css({
opacity:opacity_elements}
).animate({
opacity:0}
,interval_out_elements);
self.box_skitter.find('.next_button').queue("fx",[]).show().css({
opacity:opacity_elements}
).animate({
opacity:0}
,interval_out_elements);
}
if (self.settings.focus && !self.settings.foucs_active){
self.box_skitter.find('.focus_button').stop().css({
opacity:opacity_elements}
).animate({
opacity:0}
,200);
}
if (self.settings.controls){
self.box_skitter.find('.play_pause_button').stop().css({
opacity:opacity_elements}
).animate({
opacity:0}
,200);
}
}
self.clearTimer(true);
if (!self.settings.is_animating && self.settings.images_links.length > 1){
self.timer = setTimeout(function(){
self.completeMove();
}
,self.settings.interval - self.settings.elapsedTime);
self.box_skitter.find('.image_main').attr({
'src':self.settings.image_atual}
);
self.box_skitter.find('.image a').attr({
'href':self.settings.link_atual}
);
}
if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools){
self.box_skitter.find('.focus_button').stop().animate({
opacity:0.3}
,200);
}
if (self.settings.controls && !self.settings.hideTools){
self.box_skitter.find('.play_pause_button').stop().animate({
opacity:0.3}
,200);
}
}
);
}
,// Stop timerclearTimer:function (force){
var self = this;
clearInterval(self.timer);
}
,// Set link atualsetLinkAtual:function(){
if (this.settings.link_atual != '#'){
this.box_skitter.find('.image a').attr({
'href':this.settings.link_atual,'target':this.settings.target_atual}
);
}
else{
this.box_skitter.find('.image a').removeAttr('href');
}
}
,// Hide toolshideTools:function(){
this.box_skitter.find('.info_slide').hide();
this.box_skitter.find('.prev_button').hide();
this.box_skitter.find('.next_button').hide();
this.box_skitter.find('.label_skitter').hide();
this.box_skitter.find('.focus_button').hide();
this.box_skitter.find('.play_pause_button').hide();
}
,// Animation mouse overmouseOverButton:function(){
$(this).stop().animate({
opacity:0.5}
,200);
}
,// Animation mouse outmouseOutButton:function(){
$(this).stop().animate({
opacity:1}
,200);
}
,// Focus SkitterfocusSkitter:function(){
var self = this;
var focus_button = $('<a href="#" class="focus_button">focus</a>');
self.box_skitter.append(focus_button);
var _left = (self.settings.width_skitter - focus_button.width()) / 2;
var _space = 0;
if (self.settings.controls) _left -= 25;
if (self.settings.controls_position == self.settings.focus_position) _space = focus_button.width() + 5;
var cssPosition ={
left:_left}
;
switch (self.settings.focus_position){
case 'leftTop':cssPosition ={
left:5 + _space,top:30}
;
break;
case 'rightTop':cssPosition ={
right:5 + _space,top:30}
;
break;
case 'leftBottom':cssPosition ={
left:5 + _space,bottom:5,top:'auto'}
;
break;
case 'rightBottom':cssPosition ={
right:5 + _space,bottom:5,top:'auto'}
;
break;
}
focus_button.css(cssPosition).animate({
opacity:0.3}
,self.settings.interval_in_elements);
$(document).keypress(function(e){
var code = (e.keyCode ? e.keyCode:e.which);
if (code == 27) $('#overlay_skitter').trigger('click');
}
);
self.box_skitter.find('.focus_button').click(function(){
self.settings.foucs_active = true;
$(this).stop().animate({
opacity:0}
,self.settings.interval_out_elements);
var div = $('<div id="overlay_skitter"></div>').height( $(document).height() ).hide().fadeTo(self.settings.interval_in_elements,0.98);
var _top = $('.box_skitter').offset().top;
var _left = $('.box_skitter').offset().left;
var _topFinal = (($(window).height() - $('.box_skitter').height()) / 2) + $(document).scrollTop();
var _leftFinal = ($(window).width() - $('.box_skitter').width()) / 2;
self.box_skitter.before('<div id="mark_position"></div>');
$('body').prepend(div);
$('body').prepend(self.box_skitter);
self.box_skitter.css({
'top':_top,'left':_left,'position':'absolute','z-index':9999}
).animate({
'top':_topFinal,'left':_leftFinal}
,2000,'easeOutExpo');
$('#mark_position').width($('.box_skitter').width()).height($('.box_skitter').height()).css({
'background':'none'}
).fadeTo(300,0.3);
$('#overlay_skitter').click(function(){
if ($(this).hasClass('finish_overlay_skitter')) return false;
self.settings.foucs_active = false;
$(this).addClass('finish_overlay_skitter');
$('#mark_position').before($('.box_skitter'));
if (!self.settings.hideTools) self.box_skitter.find('.focus_button').animate({
opacity:0.3}
,200);
self.box_skitter.stop().animate({
'top':_top,'left':_left}
,300,'easeOutExpo',function(){
$(this).css({
'position':'relative','top':0,'left':0}
);
$('#mark_position').remove();
}
);
$('#overlay_skitter').fadeTo(self.settings.interval_out_elements,0,function(){
$(this).remove();
}
);
return false;
}
);
return false;
}
);
}
,/** * Controls:play and stop */
setControls:function(){
var self = this;
var play_pause_button = $('<a href="#" class="play_pause_button">pause</a>');
self.box_skitter.append(play_pause_button);
var _left = (self.settings.width_skitter - play_pause_button.width()) / 2;
if (self.settings.focus) _left += 25;
var cssPosition ={
left:_left}
;
switch (self.settings.controls_position){
case 'leftTop':cssPosition ={
left:5,top:30}
;
break;
case 'rightTop':cssPosition ={
right:5,top:30}
;
break;
case 'leftBottom':cssPosition ={
left:5,bottom:5,top:'auto'}
;
break;
case 'rightBottom':cssPosition ={
right:5,bottom:5,top:'auto'}
;
break;
}
play_pause_button.css(cssPosition).animate({
opacity:0.3}
,self.settings.interval_in_elements);
play_pause_button.click(function(){
if (!self.settings.is_paused){
$(this).html('play');
$(this).fadeTo(100,0.5).fadeTo(100,1);
$(this).addClass('play_button');
self.pauseTime();
self.settings.is_paused = true;
self.clearTimer(true);
}
else{
if (!self.settings.is_animating && !self.box_skitter.find('.progressbar').is(':visible')){
self.settings.elapsedTime = 0;
}
else{
self.resumeTime();
}
if (!self.settings.progressbar) self.resumeTime();
self.settings.is_paused = false;
$(this).html('pause');
$(this).fadeTo(100,0.5).fadeTo(100,1);
$(this).removeClass('play_button');
if (!self.settings.stop_over){
self.clearTimer(true);
if (!self.settings.is_animating && self.settings.images_links.length > 1){
self.timer = setTimeout(function(){
self.completeMove();
}
,self.settings.interval - self.settings.elapsedTime);
self.box_skitter.find('.image_main').attr({
'src':self.settings.image_atual}
);
self.box_skitter.find('.image a').attr({
'href':self.settings.link_atual}
);
}
}
}
return false;
}
);
}
,/** * Object size */
objectSize:function(obj){
var size = 0,key;
for (key in obj){
if (obj.hasOwnProperty(key)) size++;
}
return size;
}
,/** * Add progress bar */
addProgressBar:function(){
var self = this;
var progressbar = $('<div class="progressbar"></div>');
self.box_skitter.append(progressbar);
if (self.objectSize(self.settings.progressbar_css) == 0){
if (parseInt(progressbar.css('width')) > 0){
self.settings.progressbar_css.width = parseInt(progressbar.css('width'));
}
else{
self.settings.progressbar_css ={
width:self.settings.width_skitter,height:5}
;
}
}
if (self.objectSize(self.settings.progressbar_css) > 0 && self.settings.progressbar_css.width == undefined){
self.settings.progressbar_css.width = self.settings.width_skitter;
}
progressbar.css(self.settings.progressbar_css).hide();
}
,/** * Start progress bar */
startProgressBar:function(){
var self = this;
if (self.settings.is_hover_box_skitter || self.settings.is_paused || self.settings.is_blur || !self.settings.progressbar) return false;
self.box_skitter.find('.progressbar').hide().dequeue().width(self.settings.progressbar_css.width).animate({
width:'show'}
,self.settings.interval,'linear');
}
,/** * Pause progress bar */
pauseProgressBar:function(){
var self = this;
if (!self.settings.is_animating){
self.box_skitter.find('.progressbar').stop();
}
}
,/** * Resume progress bar */
resumeProgressBar:function(){
var self = this;
if (self.settings.is_hover_box_skitter || self.settings.is_paused || !self.settings.progressbar) return false;
self.box_skitter.find('.progressbar').dequeue().animate({
width:self.settings.progressbar_css.width}
,(self.settings.interval - self.settings.elapsedTime),'linear');
}
,/** * Hide progress bar */
hideProgressBar:function(){
var self = this;
if (!self.settings.progressbar) return false;
self.box_skitter.find('.progressbar').stop().fadeOut(300,function(){
$(this).width(self.settings.progressbar_css.width);
}
);
}
,/** * Start time */
startTime:function(){
var self = this;
self.settings.is_paused_time = false;
var date = new Date();
self.settings.elapsedTime = 0;
self.settings.timeStart = date.getTime();
// Start progress barself.startProgressBar();
}
,/** * Pause time */
pauseTime:function(){
var self = this;
if (self.settings.is_paused_time) return false;
self.settings.is_paused_time = true;
var date = new Date();
self.settings.elapsedTime += date.getTime() - self.settings.timeStart;
// Pause progress barself.pauseProgressBar();
}
,/** * Resume time */
resumeTime:function(){
var self = this;
self.settings.is_paused_time = false;
var date = new Date();
self.settings.timeStart = date.getTime();
// Resume progress barself.resumeProgressBar();
}
,/** * Enable navigation keys */
enableNavigationKeys:function(){
var self = this;
$(window).keydown(function(e){
// Nextif (e.keyCode == 39 || e.keyCode == 40){
self.box_skitter.find('.next_button').trigger('click');
}
// Prevelse if (e.keyCode == 37 || e.keyCode == 38){
self.box_skitter.find('.prev_button').trigger('click');
}
}
);
}
,/** * Get box clone with background image */
getBoxCloneBackground:function(options){
var box_clone = $('<div class="box_clone"></div>');
box_clone.css({
'left':options.left,'top':options.top,'width':options.width,'height':options.height,'background-image':'url('+options.image+')','background-position':options.position.left+'px '+options.position.top+'px'}
);
return box_clone;
}
,/** * Shuffle array * @author Daniel Castro Machado <daniel@cdt.unb.br> */
shuffleArray:function (arrayOrigem){
var self = this;
var arrayDestino = new Array();
var indice;
while (arrayOrigem.length > 0){
indice = self.randomUnique(0,arrayOrigem.length - 1);
arrayDestino[arrayDestino.length] = arrayOrigem[indice];
arrayOrigem.splice(indice,1);
}
return arrayDestino;
}
,/** * Gera números aleatórios inteiros entre um intervalo * @author Daniel Castro Machado <daniel@cdt.unb.br> */
randomUnique:function (valorIni,valorFim){
var numRandom;
do numRandom = Math.random();
while (numRandom == 1);
// Evita gerar o número valorFim + 1return (numRandom * (valorFim - valorIni + 1) + valorIni) | 0;
}
,/** * Stop on window focus out * @author Dan Partac (http://thiagosf.net/projects/jquery/skitter/#comment-355473307) */
windowFocusOut:function (){
var self = this;
$(window).bind('blur',function(){
self.settings.is_blur = true;
self.pauseTime();
self.clearTimer(true);
}
);
$(window).bind('focus',function(){
if ( self.settings.images_links.length > 1 ){
self.settings.is_blur = false;
if (self.settings.elapsedTime == 0){
self.startTime();
}
else{
self.resumeTime();
}
if (self.settings.elapsedTime <= self.settings.interval){
self.timer = setTimeout(function(){
self.completeMove();
}
,self.settings.interval - self.settings.elapsedTime);
self.box_skitter.find('.image_main').attr({
'src':self.settings.image_atual}
);
self.box_skitter.find('.image a').attr({
'href':self.settings.link_atual}
);
}
}
}
);
}
}
);
/** * Helper function for cross-browser CSS3 support,prepends all possible prefixes to all properties passed in * @param{
Object}
props Ker/value pairs of CSS3 properties */
$.fn.css3 = function(props){
var css ={
}
;
var prefixes = ['moz','ms','o','webkit'];
for(var prop in props){
// Add the vendor specific versionsfor(var i=0;
i<prefixes.length;
i++)css['-'+prefixes[i]+'-'+prop] = props[prop];
// Add the actual versioncss[prop] = props[prop];
}
this.css(css);
return this;
}
;
// Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS // scale and rotation independently. // 2009-2010 Zachary Johnson www.zachstronaut.com // Updated 2010.11.06 var rotateUnits = 'deg';
$.fn.rotate = function (val){
var style = $(this).css('transform') || 'none';
if (typeof val == 'undefined'){
if (style){
var m = style.match(/rotate\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 0;
}
var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
if (m){
if (m[3]) rotateUnits = m[3];
$(this).css('transform',style.replace(/none|rotate\([^)]*\)/,'') + 'rotate(' + m[1] + rotateUnits + ')' );
}
return this;
}
;
// Note that scale is unitless. $.fn.scale = function (val,duration,options){
var style = $(this).css('transform');
if (typeof val == 'undefined'){
if (style){
var m = style.match(/scale\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 1;
}
$(this).css('transform',style.replace(/none|scale\([^)]*\)/,'') + 'scale(' + val + ')' );
return this;
}
;
// fx.cur() must be monkey patched because otherwise it would always // return 0 for current rotate and scale values var curProxied = $.fx.prototype.cur;
$.fx.prototype.cur = function (){
if (this.prop == 'rotate'){
return parseFloat($(this.elem).rotate());
}
else if (this.prop == 'scale'){
return parseFloat($(this.elem).scale());
}
return curProxied.apply(this,arguments);
}
;
$.fx.step.rotate = function (fx){
$(fx.elem).rotate(fx.now + rotateUnits);
}
;
$.fx.step.scale = function (fx){
$(fx.elem).scale(fx.now);
}
;
var animateProxied = $.fn.animate;
$.fn.animate = function (prop){
if (typeof prop['rotate'] != 'undefined'){
var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
if (m && m[5]){
rotateUnits = m[5];
}
prop['rotate'] = m[1];
}
return animateProxied.apply(this,arguments);
}
;
// Monkey patch jQuery 1.3.1+ css() method to support CSS 'transform' // property uniformly across Safari/Chrome/Webkit,Firefox 3.5+,IE 9+,and Opera 11+. // 2009-2011 Zachary Johnson www.zachstronaut.com // Updated 2011.05.04 (May the fourth be with you!) function getTransformProperty(element){
var properties = ['transform','WebkitTransform','msTransform','MozTransform','OTransform'];
var p;
while (p = properties.shift()){
if (typeof element.style[p] != 'undefined'){
return p;
}
}
return 'transform';
}
;
var _propsObj = null;
var proxied = $.fn.css;
$.fn.css = function (arg,val){
if (_propsObj === null){
if (typeof $.cssProps != 'undefined'){
_propsObj = $.cssProps;
}
else if (typeof $.props != 'undefined'){
_propsObj = $.props;
}
else{
_propsObj ={
}
;
}
}
if ( typeof _propsObj['transform'] == 'undefined' && ( arg == 'transform' || ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ) ) ){
_propsObj['transform'] = getTransformProperty(this.get(0));
}
if (_propsObj['transform'] != 'transform'){
// Call in form of css('transform' ...) if (arg == 'transform'){
arg = _propsObj['transform'];
if (typeof val == 'undefined' && jQuery.style){
return jQuery.style(this.get(0),arg);
}
}
// Call in form of css({
'transform':...}
) else if ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ){
arg[_propsObj['transform']] = arg['transform'];
delete arg['transform'];
}
}
return proxied.apply(this,arguments);
}
;
}
)(jQuery);
CSS代码(skitter.css):
@charset "utf-8";/* =Skitter styles----------------------------------------------- */
.box_skitter{position:relative;}
.box_skitter ul{display:none;margin:0;padding:0}
.box_skitter ul li{margin:0;padding:0;border:solid 5px #ff9900 !important}
.box_skitter .container_skitter{overflow:hidden;position:relative;}
.box_skitter .image{overflow:hidden;}
.box_skitter .image img{display:none;}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.box_skitter .box_clone img{position:absolute;top:0;left:0;z-index:20;}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/prev.png)/*tpa=http://www.chxingyuan.com/cn/images/prev.png*/
no-repeat left top;}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/next.png)/*tpa=http://www.chxingyuan.com/cn/images/next.png*/
no-repeat left top;}
.box_skitter .info_slide{position:absolute;top:25px;left:15px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:4px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.box_skitter .info_slide .image_number_select{background:#dc6a4d;float:left;padding:4px 10px;margin:0 5px 0 0;}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px;}
.box_skitter .info_slide_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative;}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px;}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg,#555,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.box_skitter .info_slide_dots{position:absolute;bottom:30px;z-index:151;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.box_skitter .info_slide_dots .image_number_select{background:#dc6a4d;float:left;margin:0 5px 0 0;}
.box_skitter .label_skitter{z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(../images/ajax-loader.gif)/*tpa=http://www.chxingyuan.com/cn/images/ajax-loader.gif*/
no-repeat left top;width:32px;height:32px;}
.label_skitter{z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;}
.info_slide *{font-family:Consolas,arial,tahoma !important;}
.box_skitter .progressbar{background:#000;position:absolute;top:10px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px;}
/* =Preview slide----------------------------------------------- */
#preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden;}
#preview_slide ul{height:100px;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0;}
#preview_slide ul li{width:100px;height:100px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block;}
#preview_slide ul li img{position:absolute;top:0;left:0;height:150px;width:auto;}
/* =Focus----------------------------------------------- */
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000;}
.box_skitter .focus_button{position:absolute;top:50%;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/images/focus-button.png)/*tpa=http://www.chxingyuan.com/cn/images/focus-button.png*/
no-repeat left top;opacity:0;}
.box_skitter .play_pause_button{position:absolute;top:50%;z-index:151;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/images/pause-button.png)/*tpa=http://www.chxingyuan.com/cn/images/pause-button.png*/
no-repeat left top;opacity:0;}
.box_skitter .play_pause_button.play_button{background:url(../images/images/play-button.png)/*tpa=http://www.chxingyuan.com/cn/images/play-button.png*/
no-repeat left top;}
/* =Example for dimenions:----------------------------------------------- */
CSS代码(style.css):
@charset "utf-8";/*** HEADER ***/
#slider-container{position:relative;clear:both;height:450px;width:990px;margin:0 auto;}
#shadow-img-slider{height:5px;width:100%;position:absolute;top:0;left:0;background:url(../images/shadow-img-slider.png) repeat-x;z-index:30;}
.box_skitter_large{width:990px;height:450px;}
.label_skitter{bottom:20px !important;left:40px !important;padding:0px 20px 20px 20px;background:url(../images/opacity-slider-text.png) repeat;}
.label_skitter h3{margin-bottom:10px;color:#FFFF1E;height:25px;line-height:25px;}
分享到QQ
分享到微博
微信扫一扫
