SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change background images of div

    I have a div that contains a background image as below:

    Code:
    <div id="custom_header">
    <div class="container"></div>
    </div>
    
    #custom_header {
     background: #111 url(../images/i-z8tkQD5-XL.jpg) center 80px;
     background-size:cover;
     /*background-size:contain;*/
     /*background-size:auto;*/
     overflow: visible;
     background-repeat:no-repeat;
     height:770px;
    }
    Which is fine, works great, but what I would like to do now is rotate a few images but keep them as background images.

    So I tried the code below and it worked but its not very friendly in that its basically very quick fade in and out, no sort of feeling to it, I would liek it to fade in and out slowly, or to give a bit of atmosphere to the process.

    Code:
    <script>
    jQuery( function( $ ) {
        var images = [ "./images/i-z8tkQD5-XL.jpg", "./images/i-XQXfTbj-XL.jpg", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg" ];
        var currentImage = 0;
        function changeBackground() {
            $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
            if ( currentImage >= images.length - 1 ) {
                currentImage -= images.length;
            }
        }
        setInterval( changeBackground, 5000 );  
    });
    </script>
    #custom_header {
     background: #111 center 80px;
     background-size:cover;
     /*background-size:contain;*/
     /*background-size:auto;*/
     overflow: visible;
     background-repeat:no-repeat;
     height:770px;
    }
    Could someonw help me with the fade in and out or perhaps even sliding

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's fine to do this yourself, but it's worth considering using something like jQuery Cycle, too, which has done all the work for you.

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should not use setInterval, setTimeout is better...

    function changeBackground() {
    $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
    if ( currentImage >= images.length - 1 ) {
    currentImage -= images.length;
    }
    setTimeout( changeBackground, 5000 );
    }
    setTimeout( changeBackground, 5000 );

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I checked out the jquery site and one of the basic transitions is perfect, but they have an example where the images arent set a sbackground images, so could someone help me integrage below into what I already have, so I can keep the images as background images, but use the fade cycle from jquery.

    Code:
    <
    scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    
    <!-- include Cycle plugin -->
    
    <
    scripttype="text/javascript"src="http://malsup.github.com/jquery.cycle.all.js"></script>
    
    <
    scripttype="text/javascript">
    
    $(document).ready(
    function() {
    
        $(
    '.slideshow').cycle({
    
    		fx: 
    'fade'// choose your transition type, ex: fade, scrollUp, shuffle, etc...
    
    	});
    
    });
    
    


Bookmarks

Posting Permissions

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