Добрый день. Хочу совместить 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/
