Rotate the description along with image
I am building a site to replicate an existing site for a non-profit.
http://209.200.87.93/Home.aspxThey want to have a rotating image on their home page, and I have it working using the following jQuery Code:
-
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 4000);
});
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:375px;
width:480px;
margin: 0px 0px 10px 10px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
#photoShow p.current {
margin: 0px 0px 10px 10px;
}
</style>
HTML Div Code:
-
<div id="photoShow">
<div class="current"><img height="375" alt="Winter in Washington Park" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/p75.jpg" />
<p>Above: Winter in Washington Park1</p>
</div>
<div><img height="375" alt="Picture 2" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/pic2.jpg" />
<p>Picture2</p>
</div>
<div><img height="375" alt="Picture 3" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/pic3.jpg" />
<p>Picture3</p>
</div>
<div><img height="375" alt="Picture 4" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/pic4.jpg" />
<p>Picture4</p>
</div>
<div><img height="375" alt="Picture 5" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/pic5.jpg" />
<p>Picture5</p>
</div>
<div><img height="375" alt="Picture 6" width="480" src="http://209.200.87.93/portals/_default/skins/ParkPeopleFall/images/pic6.jpg" />
<p>Picture6</p>
</div>
</div>
The problem is that I can't figure out how to clear the previous slide's decription (in the <p> tag of each Div). At present the descriptions do rotate, but they are all visible since they are within the stacked Div's. How can I get the descriptions to show and hide in sync with the images?