To do this, just follow the 3 simple steps below.
1. First, you should have the list of images for your site's background.
2. Set an id for your <body> tag, let say id="body" as stated below.
<html>
<head>
</head>
<body id="body">
</body>
</html>
3. Create a javascript that changes the background-image property of the body tag using jquery and set it in a loop using setTimeout().
<script type="text/javascript">
function carousel_bg(id) {
var bgimgs = [ '1920x625_Sonata_homepage_image.jpg', '1920x625_Equus_homepage_image.jpg', '5_home_hero_1920x625_CF_background.jpg' ]; // add images here..
var img = bgimgs[id];
var cnt = 3; // change this number when adding images..
$('#body').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");
id = id + 1;
if (id==cnt) id = 0;
setTimeout("carousel_bg("+id+")", 10000);
}
$(document).ready(function() {
carousel_bg(0);
});
</script>
You can still add images by adding the image filename on the array "bgimgs" and change the variable "cnt" to add images as part of the loop.. and that's it.
To get the complete code, please see below.
<html>
<head>
<title>Hotshots Carousel Background</title> <script type="text/javascript" src="http://www.pitstopmotors.com.ph/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
function carousel_bg(id) {
var bgimgs = [ '1920x625_Sonata_homepage_image.jpg', '1920x625_Equus_homepage_image.jpg', '5_home_hero_1920x625_CF_background.jpg' ]; // add images here..
var img = bgimgs[id];
var cnt = 3; // change this number when adding images..
$('#body').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");
id = id + 1;
if (id==cnt) id = 0;
setTimeout("carousel_bg("+id+")", 10000);
}
$(document).ready(function() {
carousel_bg(0);
});
</script>
</head>
<body id="body">
</body>
</html>
Simple and functional! I added:
ReplyDeletebackgroud-position: center top in the CSS
;)
I'll try starting a preload of this code and post it here ...
Charles Costa from Brazil
charles.costa@symean.com
(Sorry for my English, I use Google Translator)
thanks charles.. really appreciate reading my post.
ReplyDeleteHi Paul
ReplyDeleteI have to create home page with background images rotation (carousel concept). if the user click any of the links in the home page. i have to set current rotating background image as a fixedbackground image for the session(until he close the browser).
i want to do without jquery plugins. is there any code or site avialbale.
regards
ganesh
Hi Ganesh, sorry for the late reply but if that is what you want, you can actually use the script above but put a jquery script to clear timeout.
ReplyDeleteTaken from the script above, set a variable that handles timeout, let say var t = 0; and should be place before the first call in carousel_bg(0).
$(document).ready(function() {
var t = 0;
carousel_bg(0);
});
Then on the carousel_bg() function, you have to set the variable when setting a timeout, please see below.
t = setTimeout("carousel_bg("+id+")", 10000);
Then lastly, if you have a link, let say set to a class="link". you can put the jquery below inside $(document).ready() function.
$('a.link').click(function() {
if (t) clearTimeout(t);
});
Hope this helps.
can I easily add a fade effect to the image swap?
ReplyDeletethanks so much for this script!! it's a lifesaver haha
yes, you can.. just use fadeOut/fadeIn effect of jquery. goodluck!
ReplyDeleteCan you provide an example for the fadeIn()/fadeOut() usage? I can figure out how to use that in your loop for a block element, but not for a CSS property. Many thanks.
ReplyDeleteHi Randy,
ReplyDeleteSorry for the late reply, been busy these days.
Please try below.
$('#body div#bground').fadeOut(function() {
$('#body div#bground').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");
$('#body div#bground').fadeIn();
});
Then create a div element inside the body with attributes below.
id="bground"
style="width:100%; height:100%; position:absolute; top:0; left:0;"
Thanks.
Thanks a lot!
ReplyDeleteThis is superb, thanks. Is there anyway I can stop the whole page from 're-loading' each time an image changes? I am using the fadein addition, but the items (a navigation bar) fades in and out with each picture as well?
ReplyDeleteThanks
Please try setting up your background with z-index:-1; the whole page doesn't really reload. it only switches images.
ReplyDeleteThanks for the post, very helpful! Inside the div that contains the background images, I have another div that I'm using as a hyperlink that corresponds to the background image. Is there way to swap the link with the swap of the background?
ReplyDeleteIf it helps get things across, this is my rough layout: http://sixfootgiraffe.com/100312/
Thanks so much!!
Not sure if I get your question but you can add a new attribute on your link element like rel="the id of the image here" then create a javascript below.
ReplyDelete$('a.link').click(function() {
var id = $(this).attr('rel');
carousel_bg(id);
});
Hope this helps.
Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. JPEG Optimizer
ReplyDelete