Simple javascript gallery-fade between images

Hi all I've created simple javscript gallery using previous and next links. The problem is that I want fade effect between images like this: http://tobia.github.com/CrossSlide/
I've pasted few lines of jquery code in my javascript functions but the fade effects aren't the same. Any help will be greatly appreciated. Best regards.

<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
	<script type="text/javascript">
	
	var NumberOfImages = 12
	var img = new Array(NumberOfImages)
	
	img[0] = "images/1.jpg"
	img[1] = "images/2.jpg"
	img[2] = "images/3.jpg"
	img[3] = "images/4.jpg"
	img[4] = "images/5.jpg"
	img[5] = "images/6.jpg"
	img[6] = "images/7.jpg"
	img[7] = "images/8.jpg"
	img[8] = "images/9.jpg"
	img[9] = "images/10.jpg"
	img[10] = "images/11.gif"
	img[11] = "images/12.jpg"
	
	var imgNumber = 0

	function NextImage()
	{
		imgNumber++
		if (imgNumber == NumberOfImages)
			imgNumber = 0
		document.images["VCRImage"].src = img[imgNumber]
		$('#imag').fadeOut( function() {
             $('#imag').fadeIn();
           });
	}

	function PreviousImage()
	{
		imgNumber--
		if (imgNumber < 0)
			imgNumber = NumberOfImages - 1
		document.images["VCRImage"].src = img[imgNumber]
				$('#imag').fadeOut( function() {
             $('#imag').fadeIn();
           });
	}
	
	
	</script>
	</head>
	
	<body>
	<IMG SRC="images/1.jpg" NAME="VCRImage" width="300" height="300" id="imag">
	<a href="javascript:PreviousImage()">Previous</a>
	<a href="javascript:NextImage()">Next</a>
	</body>
</html>

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

1 Year Ago

Show Comments

Github.com seems to require registration.

I expect you want something like this:

var img = [
	"images/1.jpg",
	"images/2.jpg",
	"images/3.jpg",
	"images/4.jpg",
	"images/5.jpg",
	"images/6.jpg",
	"images/7.jpg",
	"images/8.jpg",
	"images/9.jpg",
	"images/10.jpg",
	"images/11.jpg",
	"images/12.jpg"
];
img.current = 0;
function showImage(i) {
	$('#imag').fadeOut( function() {
		this.src = img[img.current];
		$(this).fadeIn();
    });
}
function NextImage() {
	img.current = (img.current+1) % img.length;
	showImage(img.current);
}
function PreviousImage() {
	if (--img.current < 0) { img.current = img.length - 1; }
	showImage(img.current);
}
onload = function(){
	showImage(0);
};

HTML remains unchanged.Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372