[jQuery] slideshow + offsetHeight
Hi,
well I'm trying to do a slideshow with 3 different pictures but it
doesn't work as it should be.
The pictures shell move through the frame. They should start at the
bottom of the frame so you can't see them at the start. And end at the
top so they completly move out and can't be seen anymore.
That's the code at the moment:
var i = 0;
function runIt() {
$("#slideshow img").css("display", "none");
var slideshowheigh = 300; //$("#slideshow")[0].offsetHeight;
$("#slideshow img:eq("+i+")").show("slow", function(){
//$(this).css("display", "block");
document.imgheight = $(this)[0].offsetHeight;
});
$("#slideshow img").css("margin-top", slideshowheigh);
$("#slideshow img").animate({marginTop: -document.imgheight},8000);
if (i>1)
i = 0;
else
i++;
$("#slideshow img").slideUp(1, runIt);
}
runIt();
the <style type="text/css"> :
#slideshow{width:1100px; overflow:hidden; height:300px; border:1px
solid black;}
#slideshow img{width:100%}
and the pictures in <body> :
<div id="slideshow">
<img src="http://static.twoday.net/BastiUndSeinKleinerKopfzirkus/
images/Kopie-von-bla.jpg" alt="" />
<img src="http://members.home.nl/supersonic74/bla.jpg" alt="" />
<img src="http://www.moderncommercialseating.com/wp-content/
uploads/2007/08/bla-bla-bla-2.jpg" alt="" />
</div>
It would be nice if someone could help me.
Thanks.
weidc