Solved

Image rotator... jQuery

Posted on 2013-01-26
2
416 Views
Last Modified: 2013-01-26
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
Comment
Question by:Mike Eghtebas
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 38822175
in the html, change
<div id="current">

Open in new window

to
<div class="current first">

Open in new window

(edited)
0
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 38822828
Thank you.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Table doesn't show the lines! 3 23
javascript form - error when hitting enter 3 27
web page freezes after ajax post 7 42
JQuery DataTable Functionality 8 14
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question