Re: Help with simple jQuery + png image rotator

Respond to this post

Return to posts index

Read entire thread

Hi Fernando,

Yeah I the rotation works well, but I was trying to get the other pictures that don't have a z-index of 2 to be invisible so only one is showing at a time. After sleeping on it for a night I think that I have a fix, but still need to check it out on other OS/Browsers.

http://www.castleford-printing.com/business-cards.html

I've just set all the images in the #photoShow to have an opacity of 0.0 and then gave the first image a .current class and then set that to have an opacity of 1.0.

Here's the code incase anyone is curious:

$(function() {

		setInterval("rotateImages()", 3000);

			   

		var clearPic = $("#photoShow div");

		clearPic.animate({opacity:0.0},0);

		var showInit = $("#photoShow div.current");

		showInit.animate({opacity:1.0},500);

		});

	

			function rotateImages() {

				var curPhoto = $("#photoShow div.current");

				

				var nextPhoto = curPhoto.next();

				

				if (nextPhoto.length == 0)

					nextPhoto = $("#photoShow div:first");

					

				curPhoto.removeClass("current").addClass("previous").animate({opacity:0.0},1000);

				nextPhoto.css({opacity:0.0}).addClass("current").animate({opacity:1.0}, 1000, 

																		 function() {

																			 curPhoto.removeClass("previous");

																			 });

			}

Thanks Fernando,

Clint

Adobe CS4 Master Suite
Vista Ultimate 64 SP1
Intel Core i7 920 @ 3.60GHz
12 GB DDR3 RAM
NVidia Quadro FX 3700
Matrox RT.X2 LE Capture Card
4 TB RAID 5