Background-position Change On Image Fadein

Hi,

I have a wee problem that I can’t find the solution to anywhere although I’m sure there must be one. I would be very grateful if someone could point me in the right direction.

I have thousands of football card images of players. I would like to have these images displayed one at a time completely randomly. Also, I think it would be really cool that when the image of a player loads the background image of the pitch is altered so as to place the image of the player over the positon he plays on the pitch.

I have an example at www.maple-web.com/football and the code below.

I’m managing to get the background position to move for the first image loaded but not after that, however, even this doesn’t work in firefox but fine in ie and chrome.

Thank You for any help.

PaulR

<!DOCTYPE html>
<html>
<head>
<title>Football Positions</title>
<script src="includes/jquery-1.10.1.min.js"></script>
<script>
(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
        	'animationtype':    'fade',
            'speed':            'normal',
            'type':             'random',
            'timeout':          2000,
            'runningclass':     'innerfade',
            'children':         null
        };

		var elements = $(container).children();
	
		$(container).addClass(settings.runningclass);
		for (var i = 0; i < elements.length; i++) {
			$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
		};
		
		var last = Math.floor ( Math.random () * ( elements.length ) );
        
		setTimeout(function() {
        	do {current = Math.floor ( Math.random ( ) * ( elements.length ) );} 
			while (last == current );             
			$.innerfade.next(elements, settings, current, last);
        }, settings.timeout);
        
		$(elements[last]).show();
				
    };

    $.innerfade.next = function(elements, settings, current, last) {
       	$(elements[last]).fadeOut(settings.speed);
		$(elements[current]).fadeIn(settings.speed, function() {
			removeFilter($(this)[0]);
		});
        
        last = current;
        while (current == last)
           current = Math.floor(Math.random() * elements.length);
           setTimeout((function() {
           		$.innerfade.next(elements, settings, current, last);
           }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}


$(document).ready(
	function(){
		$('#slideshow').innerfade();
	}
);
</script>

<style>
div#slideshow {
	margin:200px auto;
	height:400px;
	width:600px;
	border:1px solid grey;
	background-image:url(images/pitch.jpg);
	background-repeat:no-repeat;
}
img {
	height:200px;
	margin-left:200px;
	margin-top:100px;
}
</style>

</head>
<body>

<div id="slideshow"> 
    <img src="images/andy_townsend.jpg" data-xoffset="70%" data-yoffset="60%" />
    <img src="images/gary_lineker.jpg" data-xoffset="50%" data-yoffset="30%" />
    <img src="images/gary_ablett.jpg" data-xoffset="90%" data-yoffset="10%" />
    <img src="images/david_platt.jpg" data-xoffset="30%" data-yoffset="70%" />
</div>

<script>
var x = $("img").data("xoffset");
var y = $("img").data("yoffset");

$('#slideshow').animate({
 'background-position-x': x,
  'background-position-y': y
}, 1000, 'linear');
</script>

</body>
</html>