Solved

Image rotator... jQuery

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

Author Closing Comment

by:Mike Eghtebas
ID: 38822828
Thank you.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

815 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now