...

View Full Version : fading image slideshow problem



eiger23
10-03-2011, 05:31 AM
I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.



$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>


I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.



.fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}

.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}


jonathaneiger.com
(http://www.jonathaneiger.com)

venegal
10-03-2011, 02:19 PM
Quite obviously, you're not using absolute positioning for the images, like you claim, but relative positioning. Change that in order to keep them behind each other.

As for the centering, get rid of the left:300px for the images, give .fadein a width that reflects its actual pixel width, and give it margin: 0 auto.

Also, this is more of a CSS question. If there are still issues after that, I'm going to move the thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum