I'm trying to get setTimeout to load my replay button while my last frame show .Can this be done?
Thank you in advance for any help received.
Code:
$(function(){
slideShow();
});
function slideShow() {
var mycounter;
mycounter = 0;
$('#replay, .url').hide(); // make sure button is hidden
/**
* Array of images
*/
var arr = [ "img/image1.jpg", "img/image2.jpg", "img/image3.jpg","img/image4.jpg", "img/image5.jpg", "img/image6.jpg", "img/image7.jpg","img/image8.jpg","img/image9.jpg"];
/**
* Foreach loop
*/
$.each(arr, function(i, val) {
/**
* Changing div opacity to 0. 1000 is the time in ms.
*/
$("#sImage").animate({opacity: 0.0}, 1000);
/**
* Queue function will place the event in queue
* Changing image src after the above animate function is completed
*/
$("#sImage").queue(function(){
$("#sImage").attr("src", val);
$("#sImage").dequeue();
});
/**
* Changing div opacity to 1. 1000 is the time in ms.
*/
$("#sImage").attr("src", val).animate({opacity: 1.0}, 10000);
/**
* Queue function will place the event in queue
* Here, queue function is used to hold the changing image for 1 second display
*/
$("#sImage").queue(function(){
setTimeout(function(){
$("#sImage").dequeue();
mycounter++;
// after $.each start a loop that checks for mycounter=arr.length regularly and mycounter
setTimeout(checkCounter, 0, mycounter);
}, 1000);
});
});
function checkCounter() {
if(mycounter<arr.length) {
setTimeout(checkCounter, 0, mycounter);
} else {
// mycounter has reached arr.length ... show the button
$('#replay, .url').fadeIn('fast');
}
}
$('#replay, .replay').click(function(){ //replays video after completed
slideShow();
});
/*function doClick(){
$("#replay").trigger("click");
};*/
}