Image Carousel not repeating in IE 7 & 8
Good day to all jQuery-ers (or something like that :P)
I'm new here so before i post my question i'll just introduce myself quickly.
My name is bryan. i am 18 years old and live in the netherlands. I'm currently studying IT and i love anything to do with PC's and especialy programming (webdesign / development)
Oke my problem:
I've build a image carousel "plugin" (its not a real plugin).
The basic principle is simple:
Load an img tag with a SRC when the dom is loaded, then count to x (6 seconds for example) then fade the current img tag out using the animation. Then check load a new image into the SRC attribute of the image, follwed by a fade in when the image has loaded.
I've looked around for plugins to do this for me. But i could not find any because i ahve some wierd specs: The image is a background image wich scales with the browser window to 100% of the window. I have tried alot of plugins, but i decided to build my own.
This is the code i came up with:
- /******************
* Image interval script
******************/
$.fn.imageRotator = function( options ){
// Set up the defaults
var defaults = {
'slideTimer' : 5000, // The time after wich the image starts fading. Default it to 5000 MS (5 Seconds )
'fadeTimer' : 600, // The time the fade lasts. Default it to 600 MS ( 0.6 Seconds )
'rotateImages' : 0 // The rotating images to load in. Default images to 0, it is mandetory
};
// Merge any filled in options with the non filled in options
if(options){
// Extend options into Defaults
$.extend(defaults, options);
}
// Set up some basic variables
var slideTimer = defaults.slideTimer;
var fadeTimer = defaults.fadeTimer;
var rotateImages = defaults.rotateImages;
// Interval
setInterval(function(){
// Call the change background funtion
$(document).changeBackground({
'fadeTimer' : fadeTimer,
'rotateImages' : rotateImages
});
}, slideTimer);
}
/*****************
* Image rotater script
*****************/
$.fn.changeBackground = function( options ){
var defaults = {
'fadeTimer' : 600, // The time the fade lasts. Default it to 600 MS ( 0.6 Seconds )
'rotateImages' : 0 // The rotating images to load in. Default images to 0, it is mandetory
};
// Merge any filled in options with the non filled in options
if(options){
// Extend options into Defaults
$.extend(defaults, options);
}
$("#rotateImage").animate({opacity: 0},defaults.fadeTimer, function(){
var currentImage = $("#rotateImage").attr("src");
var arrayId = jQuery.inArray(currentImage, defaults.rotateImages);
var arrayLength = defaults.rotateImages.length-1;
// Check what image to load
if(arrayId == arrayLength){
// Start over at 0
$("#rotateImage").attr("src",defaults.rotateImages[0]);
}else{
// add one up
var i = arrayId +1;
$("#rotateImage").attr("src",defaults.rotateImages[i]);
}
});
}
To clarify: in the change background function:
arrayLength = the total num of images in the array (6 for example)
arrayId = the current image's ID inside the array. (for example the first image has arrayId 0 the second 1 etc.)
In FF 3.6, FF 4, IE 9, Safari, Chrome, Opera (11) it does work. It repeats the carousel nicely.
Except in IE 7 & 8 it does not work. It just stops when the array has finished. When i put an alert inside the if statement wich should be found when the array has looped once (where it says the current Image should be 0) it will fire in FF etc. but not in IE 7 & 8.
Is anyone familiar with this stupid bug?
if so how do i fix it?
Thanks for all the help in advance.
Sincerely,
Bryan