Modifying Couloir.org slideshow

I'm trying to modify Scott Upton's excellent slideshow
script which can
be found at http://www.couloi
r.org/js_slideshow The couloir script is a
combination of JS and CSS and uses scripts from
script.aculo.us and
behaviour

My aims were to add the following features:
1. make the script automatically generate an array of
pictures to show.
2. integrate it with the Singapore image gallery
3. add an Autoplay feature so that the user doesn't keep
having to
click next.

Considering that I've done no coding worth speaking of,
this has been a
relatively simple process until it came to implementing the
autoplay.

Unfortunately to understand what follows you'll need to see
all the
code but I haven't included all code here because it's
pages long.
However, my (minimally) modified version can be found on my
embryonic
site ( http://tymphony
.net/couloir/index.php ) I haven't changed any of
the main javascript, I've just added some php.  For testing
purposes
I've "disconnected" it from the Singapore image
gallery and it's just
showing some pictures from my testing folder.

I started off by duplicating the existing "Next"
function and renaming
it autoplay...

'#NextLink' : function(element){
	element.onmouseover = function(){
		soundManager.play('beep');
	}
	element.onclick = function(){
		var myPhoto = new Slideshow(photoId);
		myPhoto.nextPhoto();
		soundManager.play('select');
		}
}


I then stripped out all the onmouseover and soundManager
bits to stop
the beeping and tested the new link. It worked as you'd
expect

My next thought was to wrap contents the onclick function in
a for loop
like so:

'#Autoplay' : function(element){
	element.onclick = function(){
		for (z=0; z<9; z++){
		        var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
		}
	}
}


(For initial testing I gave the final value of z a definite
number,
though later I plan to make it a variable whose value is the
number of
photos to display.)

I figured that running the for loop would be like clicking
the "next
link" multiple times. However, at this point
everything falls over. The
first photo of the slideshow displays twice and incorrectly
and then
everything stops. You can see exactly what happens if you
view the
slideshow on my site. I thought perhaps that I should only
include the
myPhoto.nextPhoto();statement in the loop but I get the same
symptoms.

My main problem is that I'm coming into the middle of this
with only a
little knowledge (enough to get me hooked into continuing to
try and
solve this problem) but not enough to fully understand the
code and
therefore solve it efficiently. Even if nobody has the time
to figure
out a solution, I'd really appreciate a difficulty
assessment/some
pointers where to go for answers.

Thanks in advance,

Tim Bonnici


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Behaviour Javascript Library"
group.
To post to this group, send email to behaviourgooglegroups.com
To unsubscribe from this group, send email to
behaviour-unsubscribegooglegroups.com
For more options, visit this group at http://group
s.google.com/group/behaviour
-~----------~----~----~----~------~----~------~--~---

I'm no expert on this subject, but I am going to be working
on almost
the same exact thing pretty soon. I have had a few rough
ideas about
how an "autoplay" function like that might be
approached.

First of all, just to explain why I think the JavaScript you
wrote
isn't working is that the "for" loop is
probably executing through all
9 of its iterations in about 1 millisecond.  This is
because there is
nothing telling the "for" loop to
"wait" until X seconds (or whatever)
have passed until the next iteration of the loop is
executed.
Unfortunately, JavaScript has no "wait()" method
like Java does.

It's been several years since I have done any
"real" JavaScript coding
(just getting back into it), so I'm not certain about the
best way to
handle this by current standards. But I do know that
JavaScript has a
built-in method named: setTimeout(); and there is also a
method named
setInterval(); So, perhaps something like the approach
outlined in the
below code would work?

Note that the below is not in the context of the
"behavior" library at
all since I just downloaded it. I also have no idea about
what methods
are available in the Slideshow since I haven't used it at
all yet
either. The below script just uses the code that was inside
your "for"
loop (above) to "go to the next slide". I have
no idea whether that is
the correct code or not to do that. 

I will present the below concept in the terms of a highly
simplified
HTML document. Obviously, this is totally untested garbage.
But it just
might help to explain the approach that I was going to try
implementing. Obviously, this would need to be completely
recoded to
exist within the prototype.js/behavior.js paradigm. This is
jsut to
illustrate (hopefully accurately) how one might deal with
executing
recurring code after a delay and being able to turn that
recurrence on
and off.


###BEGIN HTML FILE###

<html>
<head>

<script type="text/javascript">


//AutoPlay on or off by default (on == true)
var autoPlayOn = true;

//delay (in milliseconds) for autoplay transition
var autoPlayDelay = 3000;


// this function will be called by the
"timeouts" we
// create to automatically advance the slideshow
function advanceSlideshow() {

     if (autoPlayOn == true) {
          // code to advance to next slide
          // (hopefully the below two lines of code are what
is needed)
          var myPhoto = new Slideshow(photoId);
          myPhoto.nextPhoto();
          // create a new Timeout for the next
advanceSlideshow() call
          myTimeout1 = setTimeout(advanceSlideshow,
autoPlayDelay);
     } else {
          //kill the timeoute
          clearTimeout(myTimeout1);
     }

}

// this function will be used to turn autoplay on and off
// this is sort of like a combined start/stop function
function toggleAutoPlay() {

     if autoPlayOn == true) {
          //kill the currently executing timeout
          clearTimeout(myTimeout1);
          //toggle the paused boolean
          autoPlayOn = false;
     } else {
          autoPlayOn = true;
          myTimeOut1 = setTimeout(advanceSlideshow,
autoPlayDelay);
     }

}



// create a new "timeOut" to get the autoplay
started
// this will execute "advanceSlideshow()"
// after "autoPlayDelay" milliseconds have
passed.
// this could more safely be invoked on body load instead
// of just inline like this.
if (autoPlayOn == true) {
     myTimeout1 = setTimeout(advanceSlideshow,
autoPlayDelay);
}

</script>

</head>

<body>

<!-- ALL OF THE SLIDESHOW HTML CODE COULD BE HERE -->

<!-- and here is a link that could "toggle"
the autoplay -->
<a href="#"
onclick="toggleAutoPlay();">Toggle
Autoplay</a>

</body>
</html>

###END HTML FILE###


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Behaviour Javascript Library"
group.
To post to this group, send email to behaviourgooglegroups.com
To unsubscribe from this group, send email to
behaviour-unsubscribegooglegroups.com
For more options, visit this group at http://group
s.google.com/group/behaviour
-~----------~----~----~----~------~----~------~--~---