jQuery easing

[toolman]

Hi,

 

I am using a jQuery script called easy slider 1.7 and I want to add easing to it, but I do not know how.

 

This is what I have in my settings:

 

var defaults = {			
		prevId: 		'prevBtn',
		prevText: 		'Previous',
		nextId: 		'nextBtn',	
		nextText: 		'Next',
		controlsShow:	true,
		controlsBefore:	'',
		controlsAfter:	'',	
		controlsFade:	true,
		firstId: 		'firstBtn',
		firstText: 		'First',
		firstShow:		false,
		lastId: 		'lastBtn',	
		lastText: 		'Last',
		lastShow:		false,				
		vertical:		false,
		speed: 			800,
		auto:			false,
		pause:			2000,
		continuous:		false, 
		numeric: 		false,
		numericId: 		'controls',

	}; 

 

any suggestions what I should do?

[trq]

The code you have posted is of no help at all.

[toolman]

Hi,

 

What code should I post?

[Omirion]

http://gsgd.co.uk/sandbox/jquery/easing/

[toolman]

Hi,

 

I have installed jQuery easing and also this banner slider: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

 

I have added the following to my code, but I cannot get the easing to work

 

easeFunc: "easeInOutExpo",
		easeTime: 750,

 

Any ideas?

 

[trq]

Post some relevant code!

[toolman]

This is from the easySlider1.5.js:

 

(function($) {

$.fn.easySlider = function(options){
  
	// default configuration properties
	var defaults = {	
		easeFunc: "easeInOutExpo",
		easeTime: 750,
		prevId: 		'prevBtn',
		prevText: 		'Previous',
		nextId: 		'nextBtn',	
		nextText: 		'Next',
		controlsShow:	true,
		controlsBefore:	'',
		controlsAfter:	'',	
		controlsFade:	true,
		firstId: 		'firstBtn',
		firstText: 		'First',
		firstShow:		false,
		lastId: 		'lastBtn',	
		lastText: 		'Last',
		lastShow:		false,				
		vertical:		true,
		speed: 			800,
		auto:			true,
		pause:			2000

	}; 

	var options = $.extend(defaults, options);  

	this.each(function() {  
		var obj = $(this); 				
		var s = $("li", obj).length;
		var w = $("li", obj).width(); 
		var h = $("li", obj).height(); 
		obj.width(w); 
		obj.height(h); 
		obj.css("overflow","hidden");
		var ts = s-1;
		var t = 0;
		$("ul", obj).css('width',s*w);			
		if(!options.vertical) $("li", obj).css('float','left');

		if(options.controlsShow){
			var html = options.controlsBefore;
			if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
			html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
			html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
			if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
			html += options.controlsAfter;						
			$(obj).after(html);										
		};

		$("a","#"+options.nextId).click(function(){		
			animate("next",true);
		});
		$("a","#"+options.prevId).click(function(){		
			animate("prev",true);				
		});	
		$("a","#"+options.firstId).click(function(){		
			animate("first",true);
		});				
		$("a","#"+options.lastId).click(function(){		
			animate("last",true);				
		});		

		function animate(dir,clicked){
			var ot = t;				
			switch(dir){
				case "next":
					t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;						
					break; 
				case "prev":
					t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
					break; 
				case "first":
					t = 0;
					break; 
				case "last":
					t = ts;
					break; 
				default:
					break; 
			};	

			var diff = Math.abs(ot-t);
			var speed = diff*options.speed;						
			if(!options.vertical) {
				p = (t*w*-1);
				$("ul",obj).animate(
					{ marginLeft: p }, 
					speed
				);				
			} else {
				p = (t*h*-1);
				$("ul",obj).animate(
					{ marginTop: p }, 
					speed
				);					
			};

			if(!options.continuous && options.controlsFade){					
				if(t==ts){
					$("a","#"+options.nextId).hide();
					$("a","#"+options.lastId).hide();
				} else {
					$("a","#"+options.nextId).show();
					$("a","#"+options.lastId).show();					
				};
				if(t==0){
					$("a","#"+options.prevId).hide();
					$("a","#"+options.firstId).hide();
				} else {
					$("a","#"+options.prevId).show();
					$("a","#"+options.firstId).show();
				};					
			};				

			if(clicked) clearTimeout(timeout);
			if(options.auto && dir=="next" && !clicked){;
				timeout = setTimeout(function(){
					animate("next",false);
				},diff*options.speed+options.pause);
			};

		};
		// init
		var timeout;
		if(options.auto){;
			timeout = setTimeout(function(){
				animate("next",false);
			},options.pause);
		};		

		if(!options.continuous && options.controlsFade){					
			$("a","#"+options.prevId).hide();
			$("a","#"+options.firstId).hide();				
		};				

	});
  
};

})(jQuery);

 

banner.js:

 

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
$("#slider").easySlider();	
  });
})(jQuery);

 

 

I have the following in my index.html:

<script type="text/javascript" src="public/slider/jquery.js"></script>

<script type="text/javascript" src="public/slider/jquery.easing.1.3.js"></script><strong>

<script type="text/javascript" src="public/slider/jquery.easing.compatibility.js"></script></strong>

<script type="text/javascript" src="public/slider/easySlider1.5.js"></script>

<script type="text/javascript" src="public/slider/banner.js"></script>

 

[trq]

Just adding options to a plugins option list doesn't do anything, you need to actually add the easing to the code in the appropriate places.

[toolman]

I see. I have included the easing in external files.

 

I am new to jQuery, so I am not sure where to include the easing code.