jquery probleempje met slider

[Steven]

Beste mede webmasters

Url: http://www.steven-solutions.nl/test/

op bovenstaande url vind je de website waar ik mee bezig ben.
De slider doet het zeer goed, alleen als je gaat kijken in FF dan zie je dat hij op een gegevend moment terug slide naar de eerste voorbeeld, in IE doet hij dit niet (je kunt dus zelf even testen).

jquery-1.3.2.js (code is te lang dus download als je wilt)

http://www.steven-solutions.nl/test/js/jquery-1.3.2.js

http://www.steven-solutions.nl/test/js/xmlSlider.js (downloaden of de code hier onder bekijken)

(function($){
	$.fn.xmlSlider = function(options) {
		var
		  defaults = {xmlFile:'',
		  			  width:500,
		  			  height:375,
		  			  speed:3000,
		  			  timeout:5000,
		  			  toggleBtn:false,
		  			  navBtn:false,
		  			  play:'Play',
		  			  pause:'Pause',
		  			  backward:'Backward',
		  			  forward:'Forward',
		  			  imageFail:''
		  			  },
		  settings = $.extend({}, defaults, options),
		  $this = this;		  
	  	//get XML
		$.ajax({
		type: "GET",
		url: settings.xmlFile,
		dataType: "xml",
		async : false,
		error: function(){
			if(typeof(console) !== 'undefined' && console != null)
				console.log("Error: XML file URL is not valid!");
		},
		success: function(xml){
			//append divs

			$this.append("<div id='xsBg'></div><div id='xsCaptions'><ul></ul></div>").find('ul');
			$this.append("<div id='xsImages'><ul></ul></div>").find('ul');	
	  		//retrive info
	  		var xsUrl,xsLink,xsTitle,xsDesc;
			$(xml).find('info').each(function(){
				xsUrl  =  $(this).find('img').text();
				xsLink  =  $(this).find('link').text();
				xsTitle  =  $(this).find('title').text();
				xsDesc =  $(this).find('desc').text();
				$("#xsImages ul").append("<li><a href='"+xsLink+"' target='_blank'><img src='"+xsUrl+"' alt='"+xsTitle+"' /></a></li>");
				$("#xsCaptions ul").append("<li><a href='"+xsLink+"' target='_blank'><h1>"+xsTitle+"</h1></a><p>"+xsDesc+"</p></li>");
			});
			//begin
			var xsCount = $(xml).find('info').size();
			if($(xml).find('info').size() > 0){
				//declare some vars & bind events 
				var	calcImg = settings.width*(xsCount-1)*-1,
					calcInfoHeight = $('#xsCaptions').height(),
					calcInfo = calcInfoHeight*(xsCount-1)*-1,
					RE = /^\d*$/,
					mouseOut = true,
					play = true;	
				//mouse events
				$this.mouseover(function(){mouseOut = false;});
				$this.mouseout(function(){mouseOut = true;});
				//decalre toggle
				if(settings.toggleBtn){
					$this.append('<div id="xsToggle">'+settings.pause+'</div>');
					$('#xsToggle').click(function(){
						if(play){
							play = false;
							$('#xsToggle').html(settings.play);
						}else{
							play = true;
							$('#xsToggle').html(settings.pause);
						}
					});
				}
				//decalre left and right mav
				if(settings.navBtn){
					$this.append('<div id="xsLeft">'+settings.backward+'</div><div id="xsRight">'+settings.forward+'</div>');
					$('#xsLeft').html(settings.backward).click(function(){
						play = false;
						$("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == 0 ) ? calcImg : "+="+settings.width }, settings.speed);
						$("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == 0  ) ? calcInfo : "+="+calcInfoHeight }, settings.speed,function(){
							play = true;
						});
					});
					$('#xsRight').html(settings.forward).click(function(){
						play = false;
						$("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
						$("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed,function(){
							play = true;
						});
					});
				}
				//dress them up

				$('#xsCaptions,#xsBg').css({'top':(settings.height-calcInfoHeight)});
					$('#xsCaptions li,#xsBg').css({'height':calcInfoHeight});
					$('#xsImages ul').css({'width': settings.width*xsCount});
				//Determine the speed
				if(!RE.test(settings.timeout))
					settings.timeout = 3000;
				//movment
				var slideTheme = function(){					
					if(mouseOut && play){				
						$("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
						$("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed ,
							function(){
								setTimeout(slideTheme, settings.timeout);
						});	
					}else
						setTimeout(slideTheme, settings.timeout);
				};
				//just at the 1st time
				imgCount = 0;
				$("#xsImages img").load(function(){
				  imgCount++;
				  if (imgCount == xsCount)
				    setTimeout(slideTheme, settings.timeout);
				}).error(function(){
					this.attr('src',settings.imageFail);
				});	
			}else
				if(typeof(console) !== 'undefined' && console != null)
					console.log("Error: XML file is not valid!");
		}
		});
	};
})(jQuery);

en in de index roep ik hem dus zo aan:

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/xmlSlider.js" type="text/javascript"></script>

en in de <head> en </head> zet ik dit:

<script type="text/javascript"> 
$(document).ready(function() {
	$("#slider").xmlSlider({'xmlFile':"sample.xml", 'width':890,'height':275 ,
							'toggleBtn':false,
							'navBtn':false,
							'play':"<img src='images/play.png' alt='play'/>",
							'pause':"<img src='images/pause.png' alt='pause'/>",
							'backward':"<img src='images/backward.png' alt='backward'/>",
							'forward':"<img src='images/forward.png' alt='forward'/>"
						  });
});
</script>

hij word dus in de div slider gezet.
Alles werkt verder ook met FF alleen in IE draait hij na het laatste plaatje dus niet terug naar begin, de tekst er onder wel maar de plaatjes niet.
Wie weet waar dit aan ligt?

[Steven]

gezien de topic al wel 22 keer bekeken is maar niemand hier wat van af weet blijkbaar heb ik er maar voor gekozen om iets anders te proberen, topic kan op slot.