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>

,

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

Thanks bro. Exactly what I wanted.

I'm looking at your code, and have a question. I have one .gif file image. and I want it to fade in after the webpage is started. how can I do this?

Hey code is great and simple.

question when i click past the pics i have in the folder the image it goes to a blank image as if its looking for the next picture?? how do i stop this. also how do i change the fade speed.

Regards

Hi, I have installed the original from the user code and I had to make one change to make the code work correctly. The image changes before the fade out so I moved

document.images["VCRImage"].src = img[imgNumber]

below the following line

`$('#imag').fadeOut( function() {`

in each function and the code worked perfectly. substitute fadeIn for the second function.

How it will be configured auto fade in and fade out, as the given one is previous next function i want this to be auto fade in fade out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.