jQuery UI Slider и Ajax галерея

[Vitalya T]

Добрый день. Хочу совместить Jquery UI slider и ajax галерею.

Проблема в том, что при изменении рейнджа больше чем на один шаг, изображения не проматываются адекватно. При изменении диапазона на один шаг, скрипт работает нормально.

Видео:

http://screencast.com/t/loDxRlNEncq

Сэмпл кода в котором это обрабатывается:

var ScrollToright=  function (Steps){			console.log ("Steps!!!!!!!!! "+Steps);					th.find('li').stop(true, true)			var next_li = th.find('li.showed:last').next()			if(next_li.length!=1)				return;			var all_li = th.find('li.showed:not(:first)')					var first_li = th.find('li.showed:first');			var additionalCollection = th.find('li.showed:first');			var trueIndexli = th.find('li.showed:first').index()-1;		    var next_li_add;			console.log ("trueIndexli "+trueIndexli);			/*for ( var i = 0; i < Steps; i++ ) {  				 additionalCollection = additionalCollection.add(th.find('li.showed').eq(i));  							}*/						for ( var i = 0; i < Steps; i++ ) {				trueIndexli= trueIndexli+i;	  				 additionalCollection = additionalCollection.add(th.find('li').eq(trueIndexli));  								}						//additionalCollection.css('background','red');			//th.find('li.showed').eq(0).css('background','red');			//console.log("additionalCollection "+additionalCollection);			//additionalCollection.css('background','red');			if (Steps>1){				first_li = additionalCollection;								all_li = th.find('li').not(additionalCollection);				 next_li_add = additionalCollection.last().next();  				next_li = next_li_add;			}			if (Steps>4) {				all_li = additionalCollection.nextAll();			}			next_li.addClass('showed').css('opacity', '0')			var left = $(first_li).width()+20			first_li.animate(				{					'left': '-'+left+'px',					'opacity': '0'				}, 				 __this__.speed,				function(){					__this__.normalize($(this))					$(this).removeClass('showed');					__this__.check_nav(th)					__this__.check_count(th);				}			);			all_li.animate(				{					'left': '-'+left+'px'				}, 				 __this__.speed, 				function(){	__this__.normalize($(this)) }			);			next_li.animate(				{					'left': '-'+left+'px',					'opacity': '1'				}, 				 __this__.speed,				function(){	__this__.normalize($(this)) }			);			__this__.ajax_li(th, "right")									//PUSH BACK									totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount1) newcount1 += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			// if (totalCountShow>5) totalCountShow = 5;						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  									  							              		Maxrange=(totalCountinThisLoad-totalCountShow+1)*10;				              		$( ".slider1" ).slider( "option", "max", Maxrange);									$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Steps);									if ( ( $( ".slider1" ).slider("value") == 	$( ".slider1" ).slider( "option", "max") ) && ( th.find('li.showed:last').nextAll("li").size()>0) ) {														var remain = th.find('li.showed:last').nextAll("li").size();						        				  		$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - (remain*10) );						        				} 								}var ScrollToLeft = function(Steps) {			var stepback = Math.abs(Steps);			console.log ("Steps!!!!!!!!! "+stepback);			th.find('li').stop(true, true)			var next_li = th.find('li.showed:first').prev()			if(next_li.length!=1)				return;			var last_li = th.find('li.showed:last')			var additionalCollection = th.find('li.showed:last');			var trueindex = last_li.index();			var totalShowed = th.find('li.showed').length-1;			//th.find('li.showed').eq(totalShowed).css('background','black');			console.log("totalShowed "+totalShowed);			console.log("trueindex "+trueindex);			for ( var i = 0; i <stepback; i++ ) {				if (i<=4){				 totalShowed = totalShowed-i;  				 additionalCollection = additionalCollection.add(th.find('li.showed').eq(totalShowed));  				}			}			if (stepback>1) last_li = additionalCollection;			//additionalCollection.css('background','green');			var left = $(last_li).width()+20			var all_li = th.find('li.showed:not(:last)')			next_li.addClass('showed').css('opacity', '0').css('left','-'+left+'px')			all_li.css('left','-'+left+'px')			last_li.css('left','-'+left+'px')			last_li.animate(				{					'left': 0+'px',					'opacity': '0'				}, 				__this__.speed,				function(){					__this__.normalize($(this)) 					$(this).removeClass('showed');					__this__.check_nav(th)					__this__.check_count(th);				}			);			all_li.animate(				{					'left': 0+'px'				}, 				__this__.speed, 				function(){	__this__.normalize($(this))}			);			next_li.animate(				{					'left': 0+'px',					'opacity': '1'				}, 				__this__.speed,				function(){	__this__.normalize($(this))}			);			__this__.ajax_li(th, "left")									//PUSH BACK									$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - 10);									 totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  									  							              		  $( ".slider1" ).slider( "option", "max", Maxrange);				              		 	 Prevli = th.find('li.showed:first').prevAll("li").size();						        				 if ( ( $( ".slider1" ).slider("value") == 0 ) && ( th.find('li.showed:first').prevAll("li").size()>0 ) ) {						        		 						$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Prevli*10);						        			}}th.find( ".slider1" ).bind( "slide", function(event, ui){  															  								 totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			totalCountLeft=totalCountinThisLoad-totalCountShow;						  			Maxrange=(totalCountinThisLoad-totalCountShow+1)*10;				              	 $( ".slider1" ).slider( "option", "max", Maxrange);				              															deltaValueStep = (ui.value-ValueOldOnSlide)/10;								//console.log("deltaValueSte "+deltaValueStep);  								if ( ui.value>ValueOldOnSlide){											//	console.log("step"+step);											//console.log("Its scroll down")				           					ScrollToright(deltaValueStep);				           															  }    									if ( ui.value<ValueOldOnSlide){												//console.log("Its scroll up")							           			ScrollToLeft(deltaValueStep);							           												}  								}); 

Скрипт целиком: http://pastebin.com/LdqPPS7K

 

 

 

 

Ссылка на сайт, где можно попробовать, как работает скрипт: http://testing.site-services.ru/