Rotating content

[kenny85246]

I have some rotating content on one of the websites im working on, its just going through a group of 10 or so pictures using JS, ive shrunk the images down all to 320px width but some are different height. There is a frame on the rotating content and i set the height for it in CSS as auto but what that does is the taller pictures are shown before they are gotten to in the queue, could someone help me as to what code to put in to hide the taller pictures until its their turn? Ill include the CSS and HTML codes below, If you need the JS i can include those too.

CSS:


<style type="text/css">
#allrecent2.tswRotatingContent { width: 320px; }
#allrecent2 .tswRotatingContentHeader { width: 320px; }
#allrecent2 .tswRotatingContentTitle
{
color: #000000;
}
#allrecent2 .tswRotatingContentBody
{
background-color: #000000;
border-color: #000000;
width: 320px;
height: auto;
}
#allrecent2 .tswRotatingContentBody div.tswRotatingContentPanelVisible,
#allrecent2 .tswRotatingContentBody div.tswRotatingContentPanelHidden,
#allrecent2 .tswRotatingContentBody div.tswRotatingContentPanelFadingOut
{
background-color: #000000;
width: 320px;
height: 240px;
padding: 4px;
}
</style>

HTML:

<div id="allrecent2" class="tswRotatingContent">
<div class="tswRotatingContentHeader">
<div class="tswRotatingContentTitle">Recent Images</div>
</div>
<div class="tswRotatingContentBody">
<div class="tswRotatingContentPanelVisible">
<!-- Insert Page 1 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/DSC_3430.JPG" width="320" height="142" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 2 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20Cuy.%20Falls%204-2-10%20003.JPG" width="320" height="427" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 3 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20East%203-30%263-31-10%20011.JPG" width="320" height="240" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 4 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20East%203-30%263-31-10%20053.JPG" width="320" height="240" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 5 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20Zanesville%204-7-10%20024.JPG" width="320" height="240" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 6 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20Zanesville%204-7-10%20030.JPG" width="320" height="240" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 7 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20Zanesville%204-7-10%20044.JPG" width="320" height="240" />

</div>
<div class="tswRotatingContentPanelHidden">
<!-- Insert Page 8 of your rotating HTML content here -->
<img style="border-width: 0px;" src="Images/2010/FHS%20vs.%20Zanesville%204-7-10%20099.JPG" width="320" height="240" />

</div>
</div>
</div>
<script type="text/javascript" defer="defer">
// Set the rotation interval
tswRotatingContentGetForId('allrecent2').timeout = 5000;
// This triggers the timer for automatically changing the selected panel
tswRotatingContentAutoSelectNextPanel('allrecent2');
</script>