CODEWITHSUNDEEP
jqueryloopsslideshowfadeslide
LDam
LDam

Reputation: 11

How to replace slide effect to fade out/fade in effect on this slideshow?

I need replace slide effect to fade-out/fade-in effect on the prev and next slide functions:

function animate(dir,clicked){
    u = true;
    switch(dir){
        case 'next':
            t = t+1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if(s<3){
                    if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===s+1) {
                            t = 1;
                            $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
                            $(o.slides,obj).children(':eq(0)').css({left: 0});
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
                    }
                    if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    u = false;
            });
            break;
        case 'prev':
            t = t-1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if (s<3){
                    if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                    if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===0) {
                            t = s;
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                            $(o.slides,obj).css({left: -(s*w-w)});
                            $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    }
                    if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                    if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                    u = false;
            });
            break;
        case 'fade':
            t = [t]*1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: m});
                    $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    $(o.slides,obj).children(':eq(0)').css({left:0});
                    if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    u = false;
            });
            break;
        default:
            break;
    }
 };

I had tried, but the auto restart didn't work!

You can view the documentation and download the complete code with the examples in this link: http://github.com/nathansearles/loopedSlider/tree/master

Please help me! (Sorry for my bad english!)

Upvotes: 0

Views: 4082

Answers (5)

gigga
gigga

Reputation: 21

This is easy to edit.

function animate(dir, clicked) {
    u = true;
    switch (dir) {
        case 'next':
            animate('fade', t);                        
            t = t + 1;
            m = (-(t * w - w));
            current(t);
            if (t === s) { t = 0; }

            /* -- don't used this script
            //-- none slide last image is map                       
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).animate({ left: m }, o.slidespeed, function() {
                if ((t === s + 1)) {
                    t = 1;
                    $(o.slides, obj).css({ left: 0 }, function() { $(o.slides, obj).animate({ left: m }) });
                    $(o.slides, obj).children(':eq(0)').css({ left: 0 });
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w });
                }
                if (t === s) $(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                if (t === s - 1)//$(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                {
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w });
                }
                u = false;
            });                        
            */
            break;
        case 'prev':
            animate('fade', t);
            t = t - 1;
            m = (-(t * w - w));
            current(t);

            /*  -- don't used this script
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).animate({ left: m }, o.slidespeed, function() {
                if (t === 0) {
                    t = s;
                    $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: (s * w - w) });
                    $(o.slides, obj).css({ left: -(s * w - w) });
                    $(o.slides, obj).children(':eq(0)').css({ left: (s * w) });
                }
                if (t === 2) $(o.slides, obj).children(':eq(0)').css({ position: 'absolute', left: 0 });
                if (t === 1) $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w });
                u = false;
            });
            */
            break;
        case 'fade':
            t = [t] * 1;
            m = (-(t * w - w));
            current(t);
            if (o.autoHeight) { autoHeight(t); }
            $(o.slides, obj).children().fadeOut(o.fadespeed, function() {
                 $(o.slides, obj).css({ left: m });
                 $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w });
                 $(o.slides, obj).children(':eq(0)').css({ left: 0 });
                 if (t === s) { $(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); }
                 if (t === 1) { $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w }); }
                 $(o.slides, obj).children().fadeIn(o.fadespeed);
                 u = false;
            });
            break;
        default:
            break;
    }
};

Upvotes: 2

jUnkEEpEr
jUnkEEpEr

Reputation: 11

Here's my version of codes. This will change the default slide effect to fade-in/fade-out effect. I'm using loopedSlider 0.5.5 - jQuery plugin. The auto start feature is also working perfectly. You will notice there are duplicate lines of codes below. You can easily solve this yourself. 

    function animate(dir,clicked){
        active = true;
        switch(dir){
            case "next":
                if(times>slides-1){ times = 0; }
                times = times+1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            case "prev":
                if(times==1){ times = slides+1; }
                times = times-1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            case "fade":
                times = [times]*1;
                distance = (-(times*width-width));
                current(times);
                if(o.autoHeight){autoHeight(times);}
                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: distance});
                    $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                    $(o.slides,obj).children(":eq(0)").css({left:0});
                    if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
                    if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    active = false;
                });
                break;

            default:
                break;
            }
        };
    });

Please let me know if this help to solve your problem.

Upvotes: 1

heathwaller
heathwaller

Reputation: 473

I used the following code, which seems to work for me:

      case "next":
          times = times+1;
          distance = (-(times*width-width));
          current(times);
          if(o.autoHeight){autoHeight(times);}
          $(o.slides,$t).children().fadeOut(o.fadespeed, function(){
              $(o.slides,$t).css({left: distance});
              $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
              $(o.slides,$t).children(":eq(0)").css({left:0});
              if(times===slides+1){
               times = 1;
              distance = (-(times*width-width));
              current(times);
               }
              if(times===slides)
              {$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
              if(times===slides-1)
              {$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
              $(o.slides,$t).children().fadeIn(o.fadespeed);
              active = false;;
              });
              break;

I hope this helps someone :)

Upvotes: 1

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

1) I've introduced one variable to keep track of left of the container in which we show stuff:

//these are default options just declare our variable below these
var n = 0;
var interval=0;
var restart=0;
var cLeft = $(o.container).position().left+'px';//Left of Container

2) next modify prev and next functions in side switch statement:

function animate(dir,clicked){
    u = true;
    switch(dir){
    case 'next':
        t = t+1;
        m = (-(t*w-w));
        current(t);
        if(o.autoHeight){autoHeight(t);}

        var pre=0;
        if(t===s+1){t = 1; }
        if(t===1){ pre=s; }
        else{ pre = t-1; }
        $(o.slides,obj).children(':eq(' + (pre-1) + ')')
             .css({position:'absolute',left:cLeft,'z-index':'1'})
             .fadeOut('slow');
        $(o.slides,obj).children(':eq(' + (t-1) + ')')
             .css({position:'absolute',left:cLeft,'z-index':'500'})
             .fadeIn('slow');
        u = false;
        break;
    case 'prev':
        t = t-1;
        m = (-(t*w-w));
        current(t);
        if(o.autoHeight){autoHeight(t);}

        var pre=1;
        if(t===0){ t = s; }
        else{ pre = t+1; }
        $(o.slides,obj).children(':eq(' + (pre-1) + ')')
                .css({position:'absolute',left:cLeft,'z-index':'1'})
                .fadeOut('slow'); //FADEOUT CURRENT IMAGE
        $(o.slides,obj).children(':eq(' + (t-1) + ')')
                .css({position:'absolute',left:cLeft,'z-index':'500'})
                .fadeIn('slow');//FADEIN NEXT ONE
        u = false;
        break;
        //....
        //....rest of the stuff which you can modify like this

Upvotes: 2

Levi
Levi

Reputation: 12472

I haven't tested this, but all I did was replace the .animate function with the .fadeOut function. 

function animate(dir,clicked){  
                u = true;       
                switch(dir){
                        case 'next':
                                t = t+1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                if(s<3){
                                        if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                                        if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                                }
                                $(o.slides,obj).fadeOut(o.fadespeed ,function(){
                                        if (t===s+1) {
                                                t = 1;
                                                $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                                                    
                                                $(o.slides,obj).children(':eq(0)').css({left: 0});
                                                $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                         
                                        }
                                        if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                                        if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                                        u = false;
                                });                                     
                                break; 
                        case 'prev':
                                t = t-1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                if (s<3){
                                        if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                                        if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                                }
                                $(o.slides,obj).fadeOut(o.fadespeed ,function(){
                                        if (t===0) {
                                                t = s;
                                                $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                                                $(o.slides,obj).css({left: -(s*w-w)});
                                                $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                                        }
                                        if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                                        if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                                        u = false;
                                });
                                break;
                        case 'fade':
                                t = [t]*1;
                                m = (-(t*w-w));
                                current(t);
                                if(o.autoHeight){autoHeight(t);}
                                $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                                        $(o.slides,obj).css({left: m});
                                        $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                                        $(o.slides,obj).children(':eq(0)').css({left:0});
                                        if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                                        if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
                                        $(o.slides,obj).children().fadeIn(o.fadespeed);
                                        u = false;
                                });
                                break; 
                        default:
                                break;
                        }

Upvotes: 2

Related Questions