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();
}
});
}
$.Pause = function(callback) {
clearTimeout(timerT);
$("#pause").fadeOut(200, function(){
$("#play").fadeIn(200, function(){
if(jQuery.isFunction(callback)){
callback();
}
});
});
}
$.Initialize= function(callback) {
count = 0;
$.CalculateDimensions();
$("#ssimage").attr("src",images[count][0]);
$("#imagetext").text(images[count][1]);
if(jQuery.isFunction(callback)){
callback();
}
}
$.NextImage= function(callback) {
if(count == images.length - 1){
count = 0;
} else {
count ++;
}
$.LoadImage(function(){
if(jQuery.isFunction(callback)){
callback();
}
});
}
$.PreviousImage = function(callback) {
if(count == 0){
count = images.length - 1;
} else {
count --;
}
$.LoadImage(function(){
if(jQuery.isFunction(callback)){
callback();
}
});
}
$.FirstImage = function(callback) {
count = 0;
$.LoadImage(function(){
if(jQuery.isFunction(callback)){
callback();
}
});
}
$.LastImage = function(callback) {
count = images.length - 1;
$.LoadImage(function(){
if(jQuery.isFunction(callback)){
callback();
}
});
}
