Member Avatar for george61

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>
  • 6 Contributors
  • 6 Replies
  • 1K Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by Mukund_1
Member Avatar for Airshow

,

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

Member Avatar for george61

Thanks bro. Exactly what I wanted.

Member Avatar for charisma

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?

Member Avatar for swaddog

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

Member Avatar for Chb511

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.

Edited by Chb511 because: Code foul.
Member Avatar for Mukund_1

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.