I have successfully created a basic image slideshow along with changing text below each image. It appears to function properly on all browsers except for IE8, where the text gets an unusual gray background color despite not having any background settings applied.
Below are the HTML and CSS used:
HTML:
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/01.png" width="800" height="560" />
<img src="images/02.png" width="800" height="560" />
</div>
<div class="info">
<h5> This is text 1 </h5>
<h5> This is text 2 </h5>
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
CSS:
.info {
list-style-type:none; z-index:150; top:100px; left:40px; width:300px; height:200px; }
SCRIPT:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({fx: 'fade', pause: 1, prev: '#prev', next: '#next'});
$('.info').cycle({fx:'fade', speed: 10 , prev: '#prev', next: '#next'});
$('.info').cycle({cleartypeNoBg: true});
});
</script>