• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

Image rotator... jQuery

I have the following code to rotate four photos; but it doesn't rotate them.

Question: How can I change this code so that it will fade in next picture and hide the current one?

Thank you.
<!DOCTYPE html>
  <html>
    <head>

	<title>iQuery CSS sizing and positioning</title>
	<script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		//$("document").ready(function() {
		  	$(function() {
				setInterval("rotateImages()",2000);
			});
			function rotateImages() {
				var oCurPhoto = $("#photoShow div.current");
				var oNxtPhoto = oCurPhoto.next();
				if (oNxtPhoto.length == 0)
					oNxtPhoto = $("#photoShow div.first");
					
				oCurPhoto.removeClass('current').addClass('previous');
				oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, 
					function() {
						oCurPhoto.removeClass('previous');
					});
			}

		//});
	</script>
	<style type="text/css">
		#photoShow { 
			height: 400px;
			width:  400px;
		}
		#photoShow div {
			position: absolute;
			z-index: 0;
		}
		#photoShow div.previous {
			z-index: 1;
		}
		#photoShow div.current {
			z-index: 2;
		}
		p{font-size: 26pt;}
	</style>
	</head>
	<body>
	  <p>jQuery-based Image Rotator</p>
		<div id="photoShow">
			<div id="current">
				<img class="gallery" src="images/Grass.jpg" alt="Photo Gallery" width="400" height="400" /img>
			</div>
			<div>
				<img class="gallery" src="images/leaf.jpg" alt="Photo Gallery" width="400" height="400" /img>
			</div>
			<div>
				<img class="gallery" src="images/Spring.jpg" alt="Photo Gallery" width="400" height="400" /img>
			</div>
			<div>
				<img class="gallery" src="images/Water.jpg" alt="Photo Gallery" width="400" height="400" /img>
			</div>
		</div><!-- photoShow -->
	</body>
</html>

Open in new window

Grass.jpg
Leaf.jpg
Spring.jpg
Water.jpg
0
Mike Eghtebas
Asked:
Mike Eghtebas
1 Solution
 
Robert SchuttSoftware EngineerCommented:
in the html, change
<div id="current">

Open in new window

to
<div class="current first">

Open in new window

(edited)
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now