Roundabot slideshow- javascriptinə animasiya verə bilmirəm

Şamo Həsənov

0

(21:36, 07/04/2012 ) #12191

salam! sadece shekile avtoplay vermek isteyirem ve shekiller dayanmadan hereket etsin, men bura kodlari yazmishdim diyesen gorsenmiyib eledir? eger beledirse tezeden gondererem kodlari bura

Şamo Həsənov

0

(22:40, 07/04/2012 ) #12199

salam axşamınız xeyir! yoxladim kodu ancaq heç bir dəyişiklik olmadi, bəlkə js-də nəsə dəyişmək lazımdı?
buda js-dəki kodu:
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: ‘lazySusan’,
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});

jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != ‘object’) ? {} : arguments[0];

// set options and fill in defaults
options = {
bearing: (typeof options.bearing == ‘undefined’) ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == ‘undefined’) ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == ‘undefined’) ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == ‘undefined’) ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == ‘undefined’) ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == ‘undefined’) ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == ‘undefined’) ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == ‘undefined’) ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == ‘undefined’) ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || ‘swing’,
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == ‘undefined’) ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || ‘lazySusan’,
debug: options.debug || false,
childSelector: options.childSelector || ‘li’,
startingChild: (typeof options.startingChild == ‘undefined’) ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == ‘undefined’ || options.reflect === false) ? false : true
};

// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;

// set starting styles
ref
.addClass(’roundabout-holder’)
.css(‘padding’, 0)
.css(‘position’, ‘relative’)
.css(‘z-index’, options.minZ);

// set starting options
ref.data(’roundabout’, {
‘bearing’: startingBearing,
’tilt’: options.tilt,
‘minZ’: options.minZ,
‘maxZ’: options.maxZ,
‘minOpacity’: options.minOpacity,
‘maxOpacity’: options.maxOpacity,
‘minScale’: options.minScale,
‘maxScale’: options.maxScale,
‘duration’: options.duration,
‘easing’: options.easing,
‘clickToFocus’: options.clickToFocus,
‘focusBearing’: options.focusBearing,
‘animating’: 0,
‘childInFocus’: -1,
‘shape’: options.shape,
‘period’: period,
‘debug’: options.debug,
‘childSelector’: options.childSelector,
‘reflect’: options.reflect
});

// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 – (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data(’roundabout’).animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}

// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind(‘click.roundabout’, function(e) {
e.preventDefault();
if (ref.data(’roundabout’).animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}

// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind(‘click.roundabout’, function(e) {
e.preventDefault();
if (ref.data(’roundabout’).animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});

// start children
this.roundabout_startChildren();

// callback once ready
if (typeof arguments[1] === ‘function’) {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}

return this;
};

jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data(’roundabout’);
var children = ref.children(data.childSelector);

children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 – (data.period * i) : data.period * i;

// apply classes and css first
jQuery(this)
.addClass(’roundabout-moveable-item’)
.css(‘position’, ‘absolute’);

// then measure
jQuery(this).data(’roundabout’, {
‘startWidth’: jQuery(this).width(),
‘startHeight’: jQuery(this).height(),
‘startFontSize’: parseInt(jQuery(this).css(‘font-size’), 10),
‘degrees’: degrees
});
});

ref.roundabout_updateChildPositions();
});
return this;
};

jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data(’roundabout’).tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});

if (typeof arguments[1] === ‘function’) {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}

return this;
};

jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data(’roundabout’).bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});

if (typeof arguments[1] === ‘function’) {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}

return this;
};

jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data(’roundabout’).bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}

if (typeof arguments[1] === ‘function’) {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}

return this;
};

jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data(’roundabout’).tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get(’tilt’) + delta);
jQuery(this).roundabout_updateChildPositions();
});
}

if (typeof arguments[1] === ‘function’) {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}

return this;
};

jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == ‘undefined’) ? null : arguments[1];
var easingType = (typeof arguments[2] == ‘undefined’) ? null : arguments[2];
var passedData = (typeof arguments[3] !== ‘object’) ? null : arguments[3];

this.each(function(i) {
var ref = jQuery(this), data = ref.data(’roundabout’), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || ‘swing’;

if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime – passedData.timerStart;

if (timer < thisDuration) {
data.animating = 1;

if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing – passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing – passedData.start, passedData.totalTime);
}

ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};

jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};

jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 5) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};

jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 – jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;

bearing = (reflect === true) ? bearing % 360.0 : bearing;

if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;

// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length – 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats

if (bearing range.lower) {
jQuery(this).roundabout_animateToDelta(bearing – range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length – 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats

if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing – range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};

jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};

jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};

// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) – target;
delta = (Math.abs(360.0 – delta) 180) ? -(360.0 – delta) : delta;

if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};

jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data(’roundabout’);
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ – data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity – data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale – data.minScale };

// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass(’roundabout-in-focus’);
} else {
jQuery(this).removeClass(’roundabout-in-focus’);
}
});

// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, ‘blur’);

if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, ‘focus’);
}

data.childInFocus = inFocus;
}
});
return this;
};

//—————-

jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data(’roundabout’).bearing) % 360;
};

jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};

jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};

jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};

jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};

jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 – ref.data('roundabout').degrees) + info.bearing);

// adjust radians to be between 0 and Math.PI * 2
while (rad Math.PI * 2) {
rad = rad – Math.PI * 2;
}

var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values

// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);

// alter item
ref
.css(‘left’, ((factors.x * info.midStage.width + info.nudge.width) – factors.width / 2.0).toFixed(1) + ‘px’)
.css(‘top’, ((factors.y * info.midStage.height + info.nudge.height) – factors.height / 2.0).toFixed(1) + ‘px’)
.css(‘width’, factors.width + ‘px’)
.css(‘height’, factors.height + ‘px’)
.css(‘opacity’, (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css(‘z-index’, Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css(‘font-size’, (factors.adjustedScale * data.startFontSize).toFixed(2) + ‘px’)
.attr(‘current-scale’, factors.adjustedScale);

if (container.data(’roundabout’).debug === true) {
out.push(”);
out.push(‘Child ‘ + childPos + ‘‘);
out.push(‘left: ‘ + ref.css(‘left’) + ‘top: ‘ + ref.css(‘top’) + ”);
out.push(‘width: ‘ + ref.css(‘width’) + ‘opacity: ‘ + ref.css(‘opacity’) + ”);
out.push(‘z-index: ‘ + ref.css(‘z-index’) + ‘font-size: ‘ + ref.css(‘font-size’) + ”);
out.push(‘scale: ‘ + ref.attr(‘current-scale’));
out.push(”);

ref.html(out.join(”));
}

return jQuery.roundabout_isInFocus(container, ref.data(’roundabout’).degrees);
};