{"id":1824,"date":"2011-05-05T07:38:19","date_gmt":"2011-05-05T06:38:19","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=1824"},"modified":"2014-08-04T09:29:23","modified_gmt":"2014-08-04T08:29:23","slug":"cycling-a-background-image-with-jquery","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/cycling-a-background-image-with-jquery\/","title":{"rendered":"Cycling a background image with jQuery"},"content":{"rendered":"

I had a question last week about whether my crossfade cycler<\/a> could instead cycle a background image. Now, cycling the background image on an element I think would be very messy indeed, among other reasons because only one background image is widely supported.<\/p>\r\n\r\n

However, by setting up a div to act as a background, and cycling the images within that div, I found the effect of cycling the background can be achieved quite simply. The code is virtually the same as the crossfade cycler.<\/p>\r\n\r\n

I’m hiding the background div as soon as it’s created, and then fading it back in once all the images are loaded to avoid any jerky transitions. If the user has javascript disabled then just the initial image is displayed as a background – which is a “graceful degradation” I think.<\/p>\r\n\r\n

I started my html by including the background div:<\/p>\r\n\r\n

<body>\r\n\r\n<div id=\"background_cycler\" >\r\n\r\n<script type=\"text\/javascript\">\r\n$('#background_cycler').hide();\/\/hide the background while the images load, ready to fade in later\r\n<\/span><\/script>\r\n\r\n<img class=\"active\" src=\"\/images\/misc\/backgrounds\/background_1.jpg\" alt=\"\"\/>\r\n<img src=\"\/images\/misc\/backgrounds\/background_2.jpg\" alt=\"\"   \/>\r\n<img src=\"\/images\/misc\/backgrounds\/background_3.jpg\" alt=\"\"  \/>\r\n<img src=\"\/images\/misc\/backgrounds\/background_4.jpg\" alt=\"\"\/>\t\t\r\n<img src=\"\/images\/misc\/backgrounds\/background_5.jpg\" alt=\"\"  \/>\r\n<\/div>\r\n\r\nrest of html...\r\n<\/pre>\r\n\r\n\r\n
Here’s the required css:<\/p>\r\n\r\n
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}\r\n#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}\r\n#background_cycler img.active{z-index:3}<\/pre>\r\n\r\n
Setting width:100% for the background div ensures it’ll take up the width of the page – but you could position it differently if needed. Here’s the javascript:<\/p>\r\n\r\n
function cycleImages(){\r\n      var $active = $('#background_cycler .active');\r\n      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');\r\n      $next.css('z-index',2);\/\/move the next image up the pile\r\n<\/span>\t  $active.fadeOut(1500,function(){\/\/fade out the top image\r\n<\/span>\t  $active.css('z-index',1).show().removeClass('active');\/\/reset the z-index and unhide the image\r\n<\/span>      $next.css('z-index',3).addClass('active');\/\/make the next image the top one\r\n<\/span>      });\r\n    }\r\n\r\n    $(window).load(function(){\r\n\t\t$('#background_cycler').fadeIn(1500);\/\/fade the background back in once all the images are loaded\r\n<\/span>\t\t  \/\/ run every 7s\r\n<\/span>\t\t  setInterval('cycleImages()', 7000);\r\n    })\r\n<\/pre>\r\n\r\n
And that’s it really – you can see a demo here<\/a>. I’ve tested in IE6, IE7, IE8, FF3, Safari 5, Opera 11 and Chrome, all on Windows 7.<\/p>\r\n
How do I make this work on a responsive design?<\/h3>\r\n
This is fairly straightforward. If we set the images as div background, and then cycle the divs, we can use background-size:cover<\/code> to ensure the image fits as best as possible. This works fine in IE9+. Have a look at this demo<\/a> to see it working.<\/p>\r\n
Can I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n\r\n","protected":false},"excerpt":{"rendered":"
I had a question last week about whether my crossfade cycler could instead cycle a background image. Now, cycling the background image on an element I think would be very messy indeed, among other reasons because only one background image is widely supported. However, by setting up a div to act as a background, and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1824","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/1824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=1824"}],"version-history":[{"count":4,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/1824\/revisions"}],"predecessor-version":[{"id":2981,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/1824\/revisions\/2981"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}