Solved

Image rotator... jQuery

Posted on 2013-01-26
2
414 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

828 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