Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    57
    Thanks
    8
    Thanked 0 Times in 0 Posts

    fading image slideshow problem

    I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.

    Code:
     $(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.

    Code:
    .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

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    eiger23 (10-03-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •