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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fade effect on background images of div

    Evening all,

    I have achieved part of what I need to do and that is to have a cycle of images set as background images within a div using the following code.

    Code:
    <script>
    jQuery( function( $ ) {
        var images = [ "./images/i-7fq38Df-XL.jpg", "./images/i-z8tkQD5-XL.jpg", "./images/i-XQXfTbj-XL.jpg", "./images/i-8DxxccH-XL.jpg", "./images/i-M7QS7bX-XL.jpg", "./images/i-QgbgVnL-XL.jpg" ];
        var currentImage = 0;
    
        function changeBackground() {
            $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
            if ( currentImage >= images.length - 1 ) {
                currentImage -= images.length;
            }
    		setTimeout( changeBackground, 8000 );
        }
    
        setTimeout( changeBackground, 8000 );  
    });
    
    </script>
    
    <div id="custom_header">
    <div class="container">
    </div>
    </div>
    
    #custom_header {
    	background: #111 center 80px;
    	background-size:cover;
    	overflow: visible;
    	background-repeat:no-repeat;
    	height:770px;
    }
    I have 2 problems, firstly at the start when the page loads no image shows, so I have to sort of wait until the cycle starts to get the firt image to show, the second thing is that its pretty basic in that the images dont fade in and out, which I would like it to do.

    Here is a link to the test area:

    http://www.accend4web.co.uk/hannah4/

    So what I want help with is to try and add a fade effect to the images, and to not have an emoty image at the start.

    Thanks

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Location
    USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For your first problem just run the code after you define it.
    Code:
    function changeBackground() {
            $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
            if ( currentImage >= images.length - 1 ) {
                currentImage -= images.length;
            }
    		setTimeout( changeBackground, 8000 );
        }changeBackground();
    What do you mean by your second question?

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    What I mean by the seond bit is I would like the images to fade in and out better rather than them at the moment where one appears goes away and another appears, there no fade in and out to it, if you know what I mean, to add a bit of mood to the effect.

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers also, the first problem is fixed, the image appears straight away now.

    Thanks


  •  

    Posting Permissions

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