Trying to create a JQuery Fading Gallery which only loads a single image in at a time

Ok I'm redoing a website called RAWdIGITAL and there is a simple fading gallery on the front page.

There is about 9 high quality images that all get loaded when the site loads.

This is slowing the site down a lot so I wanted to adapt the gallery so it loads the images when it needs them.

I get the first image fine > then it fades out > then I get the word img2 fade in and out > then img3 etc...

Here is my attempt. I've highlighted the area where I think the problem is in red

[COLOR="#40E0D0"]/* FADING GALLERY */[/COLOR]
	$j(window).load(function() {

	$j('figure img').css('display','none');

	    var InfiniteRotator =

	    {
	        init: function()
	        {

	            var initialFadeIn = 1;[COLOR="#40E0D0"] // Initial fade in interval[/COLOR]
	            var itemInterval = 5000; [COLOR="#40E0D0"]// interval between images[/COLOR]
	            var fadeTime = 2500; [COLOR="#40E0D0"]// Fade interval[/COLOR]
	            var numberOfItems = $j('figure img').length;[COLOR="#40E0D0"] // Count number of images[/COLOR]
	            var currentItem = 0; [COLOR="#40E0D0"]// counter[/COLOR]

	            var img0 = '<img src="http://www.example.com/img/image1.jpg" >';
		    var img1 = '<img src="http://www.example.com/img/image2.jpg">';
		    var img2 = '<img src="http://www.example.com/img/image3.jpg" >';

	            $j('figure img').eq(currentItem).html(img0).fadeIn(initialFadeIn); [COLOR="#40E0D0"]// load first img, then fade it in quickly[/COLOR]

	            var infiniteLoop = setInterval(function(){[COLOR="#40E0D0"] // create interval (loop)[/COLOR]

	                $j('figure img').eq(currentItem).fadeOut(fadeTime);[COLOR="#40E0D0"]// fade out current item[/COLOR]

	                if(currentItem == numberOfItems -1){ [COLOR="#40E0D0"]// if current item = number of img's -1[/COLOR]

	                    currentItem = 0;[COLOR="#40E0D0"] // then reset current item to 0[/COLOR]

	                }else{

	                    currentItem++;[COLOR="#40E0D0"] // else +1 to current item[/COLOR]

	                }

	                $j('figure img').eq(currentItem).[COLOR="#FF0000"]html(("img"+ currentItem))[/COLOR].fadeIn(fadeTime);[COLOR="#40E0D0"]// fade in new item[/COLOR]


	             
	            }, itemInterval); [COLOR="#40E0D0"]// interval time[/COLOR]

	        } 

	    };

	    InfiniteRotator.init();
	});

Code (markup):

Any help would be great thanks

 

Forgot to say the HTML is:-
<figure>

<img>

<img>

<img>

</figure>

 

You should change the attribute src not the html

 

Thanks for the reply, you where right about only changing the src attribute only.

Also I was not using eval() on the red part of the code.

so I was getting the value of the 'currentItem' not of 'img1'

i.e. the varriable, not the varriable of the varriable

Good to know for next time.