tags:

views:

845

answers:

9
Q: 

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

Hi guys!

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!)

+1  A: 

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;
                        }
Levi  2009-08-31 19:45:17
+2  A: 

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
TheVillageIdiot  2009-08-31 21:08:18
fade-in and fade-out works after the first iteration. you move from 1 to 4 and then it will start working. I'm fixing it
TheVillageIdiot  2009-08-31 21:30:12
I've modified it a bit now working with autoStart also please let me where I can send you script and test page (actually test page is from samples from github)?
TheVillageIdiot  2009-08-31 21:30:46
I've emailed code at your address. example-3 page is also working as you can see!
TheVillageIdiot  2009-09-01 04:30:06
A: 

HI TheVillageIdiot. Do you still have the code lying around. I could shurely use it.

CodeRed  2009-11-23 08:04:49
A: 

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 scirpt
                    //-- 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 scirpt
                    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;
            }
        };
    });
gigga  2009-11-27 14:24:26
A: 

all is wrong, up !

bug fixer  2010-04-01 13:18:26
A: 

hi guys i need the solution for loopped slider, fadein fadeout, plas post the answer

fernando  2010-05-31 16:01:55
A: 

Hi,

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 :)

heathwaller  2010-06-29 17:39:45
A: 

Thanks Bluebottle! That piece of code worked for me also. I needed the autostart to use the fade function and indeed it worked. Thank you!

Nick1572  2010-07-22 13:50:14

related questions

Remove repetitive, hard coded loops and conditions in C#
recursion instead of multi-loops
What is the best way to do loops in JavaScript
Best way to break from nested loops in Javascript?
Loops and Garbage Collection
ForEach loop in Mathematica.
What's the best way to loop through a set of elements in JavaScript?
Does the last element in a loop deserve a separate treatment?
flash: for loops running slow
Should try...catch go inside or outside a loop?
How to find the foreach index
Is there a "do ... while" loop in Ruby?
What is the difference between range and xrange?
Counter inside xsl:for-each loop
Iterate over and check the byte value of every character in a string - VBA
Is there a way to loop through a table variable in TSQL without using a cursor?
How can I create a loop in an onClick event?
Continue Considered Harmful?
How do I build a loop in JavaScript?
Difference between foreach and for loops over an IEnumerable class in C#
The difference between loops
Replacement for for... if array iteration
C# loop - break vs. continue
'Break' equivalent keyword for VB
C# DataTable Loop Performance