0

i'd like to include three image galleries on one page. one is running two are paused.
On event should the running gallery stop and the clicked one be running.

How do I bring the "return (function().." be stopped?

cheers mate

var delay = 2500;
var start_frame = 0;
var container = "willkommen";

function fokus(container) {0.5
    new Effect.Appear('willkommen', { duration:, to: 0.3 });
    new Effect.Appear('eintreten', { duration:0.5, to: 0.3 });
    new Effect.Appear('reservieren', { duration:0.5, to: 0.3 });

    new Effect.Appear( container, { duration:1, to: 1 });

    var lis = $(container).getElementsByTagName('li');
    for( i=0; i < lis.length; i++){
        if(i!=0){
            lis[i].style.display = 'none';
        }
    }
    end_frame = lis.length -1;
    setTimeout(fadeInOut(container, start_frame, start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(container, frame, start_frame, end_frame, delay, lis) {
        return (function() {
        lis = $(container).getElementsByTagName('li');
        Effect.Fade(lis[frame]);
        if (frame == end_frame) { frame = start_frame; } else { frame++; }
        lisAppear = lis[frame];
        setTimeout("Effect.Appear(lisAppear);", { duration:0.5, from:0.5, to:1 } );
        setTimeout(fadeInOut(container, frame, start_frame, end_frame, delay), delay + 3500);
    })  
}
Eran Egozi
  • 775
  • 1
  • 7
  • 18

1 Answers1

0

You need to store the timeout id returned from setTimeout and pass it into the clearTimeout function.

I'm not sure exacly how you're invoking the fokus function, but if you want it to encapsulate logic in multiple places on one page you should use it as a constructor function.

function Fokus (container) {
  ...
  this.timeout_id = setTimeout(fadeInOut(container, start_frame, start_frame,end_frame, delay, lis), delay);
  this.cancel = function () {
    clearTimeout(this.timeout_id);
  }
}

var gallery = new fokus("willkommen");
gallery.cancel();

There's not a whole lot of context given with your code, but it looks like you're using global variables for everything; I urge you to look into anonymous, self-executing closures to prevent global namespace pollution.

Community
  • 1
  • 1
Adam Lassek
  • 35,156
  • 14
  • 91
  • 107
  • Thank you Adam. I tried to follow your Idea. i putted it on my site. The Slideshow doesn't work yet. I don't know how to pass to the fadeInOut Function. http://www.altenburger-typografie.ch/testing/hotelarnegg/ http://www.altenburger-typografie.ch/testing/hotelarnegg/javascripts/hotelarnegg.js – atypografie Mar 01 '11 at 11:19