I'm trying to create a simple image slideshow that is timed based on
when the image is loaded. I'm having a problem when using callback
functions and setTimeout. The callback function seems to append each
time the function is called. I was wondering how to resolve this
problem
Order of events:
1. Click Play
2. Play message is shown.
3. First image switch Set message is shown
4. Play message is shown.
5. Second image switch Set message is shown twice.
6. Play message is shown.
7. Third image switch Set message is shown three times.
...
etc to n Set messages.
The function in question is the $.Play() function. I appreciate any
guidance on what could solve the problem I am having.
Code:
$(document).ready(function(){
$(#first).click(function(){
$.Pause();
$.FirstImage();
return false;
});
$(#prev).click(function(){
$.Pause();
$.PreviousImage();
return false;
});
$(#play).click(function(){
$(#play).fadeOut(200, function(){
$(#pause).fadeIn(200, function(){
//timerT = setTimeout($.Play(),2000);
$.Play();
});
});
return false;
});
$(#pause).click(function(){
$.Pause();
return false;
});
$(#next).click(function(){
$.Pause();
$.NextImage();
return false;
});
$(#last).click(function(){
$.Pause();
$.LastImage();
return false;
});
$.Initialize();
});
$.LoadImage = function(callback) {
$(#imagebox).fadeOut(500, function(){
$(#ssimage).fadeOut(10, function(){
$(#loadbox).fadeIn(10, function(){
$.CalculateDimensions();
$(#imagebox).fadeIn(500, function(){
$(#ssimage).attr(src,images[count][0]);
$(#imagetext).text(images[count][1]);
$(#ssimage).load(function(){
$(#loadbox).fadeOut(10, function(){
$(#ssimage).fadeIn(500, function(){
if(jQuery.isFunction(callback)){
callback();
}
});
});
});
});
});
});
});
}
$.CalculateDimensions = function(callback) {
var width = images[count][2];
var height = images[count][3];
var doc_width = $(document).width();
var doc_height = $(document).height();
$(#showbox).height(doc_height - 50);
$(#showbox).width(doc_width - 50);
$(#imageboxwrapper).height($(#showbox).height() - $
(#sscontrols).height());
var max_height = $(#imageboxwrapper).height() - $
(#imagetext).height() - 40;
if(height max_height){
ratio = max_height/height;
width = ratio * width;
height = ratio * height;
}
$(#ssimage).css(width,Math.floor(width));
$(#ssimage).css(height,Math.floor(height));
$(#imagetext).css(width,Math.floor(width));
$(#imagebox).css(width, Math.floor(width));
$(#loadbox).css(height, Math.floor(height));
if(jQuery.isFunction(callback)){
callback();
}
}
$.Play = function(callback) {
alert(Play);
clearTimeout(timerT);
$.NextImage(function(){
alert(Set);
clearTimeout(timerT);
timerT = setTimeout($.Play(),4000);
if(jQuery.isFunction(callback)){
callback();
