i'm using a javascript slide show and i want text to display underneath.. however the div box is collapsing and making the text underneath go up under the images.. how can i fix this? i've tried float clearing.. defining a specific height but that loses it's responsiveness. also i can't seem to center the slide show either.. it doesn't see how big the image is and puts the leading edge of the image in the center instead of the middle. is this too confusing?
ultimately.. i want a slide show that i can center in the page.. that's responsive and that holds its height so i can put text underneath it
java script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein');}, 3250);});
$(function(){ $('.fadein-bottom img:gt(0)').hide(); setInterval(function(){ $('.fadein-bottom :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein-bottom');}, 3250);});
</script>
css:
.fadein { position:relative; max-width:100%;}
.fadein img {position:absolute; max-width:100%; margin-right:auto; margin-left:auto;}
html:
<div class="fadein">
<img src="zimgs-books/archive/prostatitis/01.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/02.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/03.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/04.jpg" style="max-width:100%;>
</div>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)