Cycling a background image with jQuery
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 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.
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.
I started my html by including the background div:
<body>
<div id="background_cycler" >
<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="/images/misc/backgrounds/background_1.jpg" alt=""/>
<img src="/images/misc/backgrounds/background_2.jpg" alt="" />
<img src="/images/misc/backgrounds/background_3.jpg" alt="" />
<img src="/images/misc/backgrounds/background_4.jpg" alt=""/>
<img src="/images/misc/backgrounds/background_5.jpg" alt="" />
</div>
rest of html...
Here’s the required css:
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler img.active{z-index:3}
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:
function cycleImages(){
var $active = $('#background_cycler .active');
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
And that’s it really – you can see a demo here. I’ve tested in IE6, IE7, IE8, FF3, Safari 5, Opera 11 and Chrome, all on Windows 7.
How do I make this work on a responsive design?
This is fairly straightforward. If we set the images as div background, and then cycle the divs, we can use background-size:cover to ensure the image fits as best as possible. This works fine in IE9+. Have a look at this demo to see it working.
Can I use this on my site?
Probably. See my policies on using code from this site.
Tags: jQuery
If you’re saying all the images are showing at the same time then that’s an issue with your css. If they don’t rotate there’s something wrong with your javascript. Have you got jQuery loaded?
Have a look at this page for help with debugging.
Hi Simon,
Thanks a ton. I’m brand new to HTML/CSS/JavaScript, and as a last minute feature to our project, I’d like to add this feature to our opening page. Just to experiment, I’ve made new css and js files, copied the code, used my own picutures, and added the html to our pages file. When I run it, all of my pictures pop up at the same time with no cycling. Any thoughts on what I am doing wrong?
Scott
That sounds as if your javascript is not going back to the first image at the end of the cycle. This usually happens when your javascript selector doesn’t match your html.
Matt
Impossible to guess what the issue might be. Start with this page.
Hi There, I’m trying to use this in a website I am building but cannot get it to work locally. Any suggestions? Thankyou
The code is working but goes crazy at the end of my img pile and then stops on the last image. Any thoughts as to why?
If you can post a link to your current page (not send me the files) then I’ll take a quick look. Otherwise I’m guessing…
sir i thinks, i have done all the things in the debiggung link but the page seems to do the same.. i loaded jquery once and tried to change the ‘$’ to ‘jQuery’.. i did all the necessary things but it doesnt seem to work or change anything at all..
Have you been through the debugging page I linked to? It looks not. You have jQuery loaded twice.
that is my code sir can u help me fix it.. thanks
Take a look at this debugging guide.
excuse me sir, i did all the things you said above but my background seems to not fade at all.. its not even changing too.. pls help me in our project. thank you sir
Move your script outside #background-cycler.
Hi there,
Please see the url attached to my name. I have the background slider working, as I copied your responsive demo exactly. There seems to be a bug on the third cycle. I currently only have two slides. The first displays great, the second fades in perfect, but going from the second back to the first there is a weird jump. As far as I can see in dev tools is the Active class is not being added on the third cyrcle, but comes back on the fourth.
Any ideas why this happened, even though I copied your demo? Thanks!
Thank you for sharing this code Simon! The comments help refine and add. Really great way of sharing!
Posting a link to your site is easiest.
Hi Simon I would like to post it here my code but it does not allow I need your little bit I tried everything even the listing of possible error that you have posted on this website but it does not work if you dont mind can I send it to your email address my html code ? but I dont have your email then…
Check this to help you find the problem.
Hi Simon I tried it everything using your code but it did not work
The javascript can be placed either in the document head or before your closing body tag. If you have a look at the demo and view the source you can see how I’ve done it.
Hi, I’m familiar with html and css, but I haven’t yet learned javascript… How and where do you implement the function?
You’re on the right lines. Set different backgrounds in your css using classes, and then just change the class with js when you change the tabs.
Simon,
Maybe you can help me…on this page: http://cppm-dev.umn.edu/discover-cppm, I have three tabs: Planning, Design, Construction. The designer requires a different background image for each page. Right now I have the correct background image for the Planning page. It is set via css as a page background via link to the image using the #full-page-wrapper ID.
So I’m thinking that there must be a way to change the background image for each tab selection via JS.
The classes for each tab:
li.planning.active
li.design.active
li.construction.active
I’m not skilled enough with JS to figure this out, but I think we could have this logic:
if li.planning.actve
then #full-page-wrapper background image A
if li.design.active
then #full-page-wrapper background image B
if li.construction.active
then #full-page-wrapper background image C
What do you think? Can you provide a little help please?
Thank you!
That sounds like you might have jQuery loaded twice on your page, or possibly that you’re using two different javascript frameworks on one page (e.g. jQuery and MooTools). If the former, just load jQuery once, if the latter you will need to use noConflict().
Helloo simon ..i tried using a javascript slider but its not working. it only works when i disable the jquery for the background slider. Is it possible that i can use the background slider with another javascript slider on the same webpage
Yes, you could adapt this code to fo what you want.
I love this, but is it possible to have arrows and ‘dots’ to click through the images as well? A bit like adding the next/previous options on this page: http://www.simonbattersby.com/blog/jquery-endless-slider/ to the background image on this one?
You need to set your javascript so it only fades the divs you want to fade. The issue (guessing since I don’t know your html) is that this code:
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler div:first{/highlight]');is finding your darkening div at the end of the first cycle. Numerous ways of fixing this, but a simple way would be to give all the fading divs a class of
fadeand amend your jQuery:var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler .fade:first{/highlight]');Hi Simon, like you said earlier the JavaScript is indeed fading my my extra darkening div but how can i tweak the java-script to stop this. Cos the fade function after the cycle fades out the div with the #background cycler …
You need to cycle the divs, not the img tags – have a look at this similar example.
I am try to add text to each background images.
I put the img and text in the same div but the hide function is not allowing the image or the text to be seen
Sounds like your js is fading out your extra ‘darkening’ div. Depending on how your html is set up you may need to tweak the js to stop this happening. You can see whether the div is being affected by using Firebug or similar.
hi simon…i tried it and it worked well..but there seems to be a little problem. The div darkens it for the first cycle of the slider then dark effect goes away for the second cycle of sliding and then the dark div works again. it keeps happening. So in summary its like dark effect to normal to dark to normal ….. So how can i get the dark effect to stay all on without the slider reverting to normal
You’d need another div within #background_cycler, position:absolute, width:100%;height:100% with a higher z-index, and set a black background with an appropriate opacity.
hi simon, Please how can i create an effect to darken the background image slider with css as seen here https://www.campusjob.com
I solved everything it is working fine now, look at my website.
Thanks for everything, you are a good help for everyone here.
Keep up the good work!
Sounds like there’s a problem with your css, but impossible to tell without seeing the page. Use Firebug or Chrome Developer tools to see what css is being applied to your images.
i have everything to work only i have no images showing up. I can see the transition, but no images!
Posting code into WordPress comment fields is challenging. If you need to send code use the Contact page.
I cant post my codes here???? It says i try to spam your blog??
Thanks Simon :-)… its actually internet explorer 11.. actually realized your page worked just fine. So i revisited my code and solved the problem. Thank you
Impossible to guess what the issue might be really. Does my page have the same issues, and if so, in what version of IE? Otherwise check your doctype and css.
hi Simon…the code works perfectly in my mozilla developer edition but there seems to be a funny issue with my internet explorer rendering esp. with issues pertaining to my opacity and z-index
Images aren’t much help for debugging I’m afraid. Have a look at this guide to start debugging..
Hi Simon, i am trying to make a background cycler for my website. I made all the pages but cant get it to work!
this is the html: http://i62.tinypic.com/2vnpea1.jpg
this is the javascript: http://i59.tinypic.com/2h68y07.png
and this is the css: http://i57.tinypic.com/1zpma11.png
I dont know what is wrong, can you help me??
Sounds like your css isn’t quite right – check you have
z-indexandpositionset correctly.I’m trying to use it as background, not like a slideshow, and it shows over all website content..
Cristi
It’s pretty much as simple as I’ve written it. Wrap your img tags with a tags, then replace ‘img’ with ‘a’ in both your css and your js.
Pete
This example on the basic cycler should give you what you want.
Thank you for your fast answer, but I must tell you I’m not very advanced. Can you tell me how to do this exactly ?
Yes. Just wrap your img tags with anchors and then cycle them instead of the images.
Hi there! Is it possible to add href to each image ?
The path to your images must be wrong for that to be happening. Only thing I can suggest is jut to check the images are where you think they are on the server.
Thank for the tutorial, im just battling to get the images to show, it only shows a black x or broken image icon. I have placed all the code in but simply cannot get it to work
Yes, easiest way to do this it to wrap your images in a div , then put your text in the div as well, and fade the div rather than the image. This example shows the approach – you’ll need to tweak the css to match the background cycler example.
Is it possible to have a link attached to the background and have it change as the background image changes?
Thanks
Yes, easy enough, you just need to add the fade of the images on the page into the
cycleImages()function. The code for the simple crossfade here may be helpful.I really love this but wondered if it was possible to have other images fade at the same time. So that you could have thumbnails that change to be the background, a bit like this: http://www.gucci.com/uk/home
You can do this just by editing the
cycleImages()function to transition with a slide, Have a look at this page for some similar ‘slide’ code.Hi:
How would you change from a “fade” to a “slide”?
Thanks
If you’re using big images, they’re going to take a while to load. On the demo page, and documented above, I hide all the images until they’re loaded and then fade them in using
$(window).load(). Then you don’t see the images loading.Hi there, love this script! I just have one question, I have 5 background images I’m loading but because they are big in file size they take a bit to load and then all load at once. I would ideally like it to only load the first img and show it right away and then load the others in the background. Is that possible?
One more thing, it seems like no matter what, the rest of the page will be loaded and showing, and only when all of these images have loaded will it even appear at the top of my page. Trying to make it a bit more seamless so it appears sooner rather than the last thing. Thanks!
That worked! I just moved the script outside of the div, that was something I didn’t even realize I had it in the div. Thanks Simon!
Sam
The issue you’re having is that your on the last img,
jQuery('#background_cycler img.active').next().lengthis still greater than 0 because of your script element. Consequently it doesn’t flip back to the first img. You can see this if you view the html in Firebug when it’s running. To fix, either just move your script outside of #background_cycler, or target the img elements specifically in your js:var $next = (jQuery('#background_cycler img.active').next('img').length > 0) ? jQuery('#background_cycler .active').next('img') : jQuery('#background_cycler img:first');Thanks for getting back to me. I basically copied your code you have provided above. Correction to my previous post, after the 3rd picture it goes to the 2nd picture for a split second, then back to the 3rd, then does the proper cycle. Only changes I made to the css is a div overflow and width of the image. The site is: http://www.albertnicholas.ca
Thanks!
Hi Sam
There’s either a problem with how you’re identifying the ‘first’ image in your javascript, or with your css. If you’re still stuck, post a link.
Hi Simon,
Thanks for this! It’s fantastic. I have a little glitch and I can’t seem to fix it. After the last image, it fades to the first image again for a second, then quickly switches back to the last image, then 7 seconds later goes back to the first image properly. But everytime, it switches for a split second then back on the last image before it cycles again properly. It is a wordpress template and I’ve changed $(function) with jQuery(function). Any tips? Thanks!
Hi Jim
I’m not sure I completely understand your question….but in the demo,
#wrap_backgroundis set withposition:absolute, so it needs width and height set explicitly to display properly.Hey Simon:
Like others have said, great tutorial.
For my own clarification, why, in “wrap” is the width effected, yet the height of the container, has to be changed in the “wrap_background”?
Next up, a full page Pager. 🙂
Impossible to tell for certain, but sounds like you might need to set
overflow:hiddensomewhere in your css. If you view the code on the demo that may help.Thank you, that is awesome. But could you give me a hint that the picture will be displayed over the whole screen without any scrollbars? In CSS I have for a static image the following entry: background: url(../pics/background/bg01.jpg) no-repeat center center fixed;
This example highlights numbered page controls. Replace these with dots and remove the Next and Previous code and you’re there.
None of these examples have pagination dots. The closest is the “multiple cyclers with slideshow controls”, but the code for that seems to be quite a bit different to the code on this page. I would like to get some simple code to add in to the code on this page that I already have working well, without having to make too many changes!
Yes, you could do this easily enough. Have a look at some of the variants on the basic crossfade which should help you.
Is it possible to have pagination / slide indicator dots on the slides, that change with the current slide, and can be clicked on to jump to the slide? Normal pagination dots.
Impossible to tell from a description I’m afraid. Try using Firebug or the code inspector in Chrome to see why css is not being applied to your elements.
Hello, I have a problem, I have a class that contains the attribute background-size: cover and when applied to the images, they do not accept (nothing happens), this to make them responsive, You Might help me
Hi Simon,
you made my day. I created a private webpage for my friends and relevants to send them my Christmas greetings. Your code snippet helped me to create a slideshow which displayed my pictures I’ve taken on the local German Christmas markets.
Thank you very much for sharing your code.
Cu framp
Nice! That solved the problem thx! 🙂
The problem with the height only appears if u make the window very wide and the height very short, so it shouldnt really be a problem. Just bugged me a bit xD however if you make it really short in width and very tall, it somehow affects my footer position of my footer >.<
Anyways thanks for very fast reply and the awesome code 🙂 Happy new year
If you want to use this for multiple cyclers you need to use
.each(). Have a look at this example.I can’t see the issue with your background height.
Hello Simon, thank you for the easy to understand code.
I tried adding the effect to class’s since i got several rows with different bg’s, which worked like a charm. I then tried your other script so that it would continue to change like a loop, but i noticed that would only work on my sites first row! :/ Is there a way to make the bg continue on different places i have made it? in other words, make it loop everywhere, instead of only one place? Currently working on a website with a bootstrap template, which is linked here http://www.marktheart.dk/bootstraptest/index.html
Also i got some problems making the classes bg cover in height… Dont know if you can help with that… You should notice it, if you play with the browser window a bit.
Thanks anyway 🙂
Remove the
.activefrom your html and amend your selector to randomly pick the first image – but make sure the display is OK if a user has js disabled.To pick an image which isn’t the current active one use the
.not()selector and pick just from the inactive images:$('#background_cycler img').not('active').eq(number);Hello again Simon,
There’s an interesting point in generating randomly the images. By the way, I still can’t generate the first one randomly because of the .active class (only one img has it in the html).
The point of this message is: how would/could I check if the generated number is the same as the one previously generated? You can’t have a local variable to the function which checks that case and proceed like: while the numbers are the same, generate new number.
This would be needed because if the new image is the same as the current one, the transition is not well done, there is a jump in the images.
Thanks for your ideas Simon!
In exactly the same way, or use server side code to do it.
Ok, I found the solution:
var $next = $(‘#background_cycler’).find(“img”).eq(number);
But how could I generate randomly the first image?
What you’re going to find there in your example is the third (since .eq() is zero-based) element within
#background_cyclerthat has classactive.There isn’t one. Try removing
.activefrom that selector.Hi Simon, I’m very interested in randomizing the image selection. I have seen in your comments that it’s necessary to change this line:
var $next = ($(‘#background_cycler .active’).next().length > 0) ? $(‘#background_cycler .active’).next() : $(‘#background_cycler img:first’);
I have written the following line (the number 2 would be generated randomly):
var $next = ($(‘#background_cycler .active’).eq(2);
But it doesn’t work… It’s the first time I’m using .eq() so I would appreciate any help from you. I have searched through the internet but I can’t make it work. Thanks.
You’re on your own with the Galaxy as I don’t have access to one. The issue with this and with the native browser may well be lack of support for background-size:cover.
There are still problems on my Galaxy note 8 (1280 x 800). In portrait it has bands top and bottom in all browsers and still fails completeley in the native “Internet” browser.
OK will do. I actually just fixed mine in ios by making the image 1200px the same height as yours and 1920px to cover screens to that size. I will add in your css to hopefully make it work on all resolutions.
Thanks for your help
Have a another look at mine, I’ve tweaked the css which should remove the repeat.
I have just checked both yours and my versions on a big screen in ie, Firefox and Chrome (Safari ok) and it only covers up to 1600px then it repeats.
I also have a bug in mine in ios Safari in portrait mode where I have similar repeats at the top and bottom but yours works fine so I must have a conflict somewhere. I was hoping if you can shed light on the 1600px issue it might help me solve the ios issue.
Many thanks
Rob
Hi Rob
I can’t recreate this, my demo page works fine on Android.
Thanks Simon. It works great in Safari now but not in the native Android browser. The image jumps in front of the text. It is not a show stopper for me however as it is not a good browser. I think they might be fazing it out in Android and replacing with Chrome so maybe it isn’t getting updated any more.
I suspect this might be due to lack of support for background-size, dependent on your browser version. I’ve tweaked the css on the demo, give it another try and let me know.
On the site I am working on I found it stopped working in Safari after I added the responsive div. As per your demo page:
http://www.simonbattersby.com/demos/background_cycler_demo_divs.htm
When I checked your demo it doesn’t work in Safari either (or the native Android browser). Is there a way round this?
Thanks Simon, excellent stuff
If you take a look at the link in the penultimate paragraph you’ll find the answer to this question.
Hey man awesome tutorial, extremely helpful and really straightforward. However was wondering if it’d be possible to make the background image responsive, I noticed whenever i minimized the window to a certain size the background image doesn’t adjust to take up the space any thoughts. Thanks again for the awesome tutorial. 🙂
Casey
I think you are missing the javascript (included in my demo as /javascript/crossfade_images2.js).
Hi there.. As bad as it sounds, I copied the whole source for your demo page and just changed the image names & locations, as well as the .js file just to even see If I could make it work. No matter how hard I try I just cannot get anything to happen in safari or firefox. Any thoughts?
Hi Vikas
What you need to do is put your images and text in a div and then cycle the div – like this example (not a background, but the same idea).
Thanks a lot for such a nice article .One assistance i need from you is to add unique paragraph in each image just like you have added in your demo one but that is one only and is same in all the images whereas i need it unique in all .Please help me ..
Thanks..
Yes I think so, I thought there was maybe some easy trick to do this, but I’ll leave as it is 😉
Not impossible, but very messy I think. You could perhaps use javascript to attach the id of the current image as a query string to the URL when an internal link is clicked, and then use this to set the initial image on the new page. Personally I don’t think it’s worth it…
That’s awesome thanks !
There’s just one think I’d like to improve but I don’t know if it’s feasable (I nearly don’t know a thing in coding); I use this on several pages of my website, and when I browse another page, the cycler starts again from the beginning. Is there a way to keep it cycling without starting when I change page ? (go from home to contact on my website for example : http://essaimd.weebly.com/home.html)
Without seeing your page I can’t really say. If you have a look at this example for slideshow controls it may help.
Hi again,
I am trying to expand the script with a ‘cycleBack’ function because I want to add a prev/next control. Basically, I replaced the words ‘next’ and ‘first’ with ‘prev’ and ‘last’ respectively. It seems to work, although it takes twice as long as expected to go from the last image to the second last image. Using a ‘prev’ button I have to click twice to do the same. Do you encounter this problem too?
Helmut
If you must have it in a table, then I think the best way to do what you want is to just use javascript to read the height and width of the containing cell, calculate the optimum image size from this, and then set #backgroun-cycler accordingly.
Hello
I’m wondering if there is a way to put this great code into the middle of a 3×3 table in such a way that the side’s autoadjust their height to the pictures used and also depending on the width of this table?
To do this the best way is to add a little javascript to hide #background_cycler before starting the fade rotation as shown:
$('#background_cycler').hide();This will ensure that if js is disabled then the top background image will show.
Hi there,
thank you, thank you, thank you…
I’m experiencing just one little malfunction here. I presume the first image is supposed to fade in, coming from a white/blanco canvas. My problem is that the first image pops up entirely as soon as the window/page is loaded. There is no fade. The rest works pretty fine. Big up!
Helmut
The way to avoid that is to hide the images as the page loads using this snippet as shown:
<script type="text/javascript"> $('#background_cycler').hide();//hide the background while the images load, ready to fade in later </script>Then you can’t see the images as they are loading.
Hi there,
First off, thank you for this amazingly simple solution, it’s awesome.
The problem I’m having is on page load the images all load at once and you can see them loading behind each other (which looks a bit messy). Could this be because I have it inside another div?
Cheers,
louis
Hi
I’m not sure I understand precisely what you mean, but if you want to cycle the image on a click, then just leave the cycleImages() function unchanged, and replace the
$window.load()code with something like:$('#yourElement').click(function(){ cycleImages(); });Simon,
I know I’m a bit late on this thread, but how do I achieve cycling through the background OnClick as opposed to fade in or fade out?
There’s obviously a problem in your code somewhere. Check for errors in your jQuery. This link may help.
@Simon
The images are now layered upon each other, it was just that I did not have all the image links. However the fade in out animation does not work.
I haven’t tried jsfiddle no, but I can’t see why it wouldn’t work. Have you copied the css across as well?
@Simon, I have copied and pasted the code exactly as have done so within Jsfiddle. However I have removed both the body tag and the script tag as they are not required with in js.
Have you tried within Jsfiddle? If so are you getting the same results?
Manny
That sounds like you haven’t included the css necessary to stack the images on top of each other.
Hi there, I have just attempted to copy and paste the code into jsfiddle and it does not seem to be working and I can not for the life of me figure out why.
The transitions do not work and the images, are placed in a vertical line, instead of being stacked up on each other.
Has any one tried testing within jsfiddle and if so, are they reaching the same conclusion?
The images display fine for me in Chrome.
Hi,
Thanks for the code. I see it working in my browser.. however the images are not displaying. Website: http://www.pusherbeats.com/ratsosa
Hi Kenneth
It’s kind of hard to tell what’s wrong without seeing your site. I’d suggest checking through the css first.
Hi Simon,
I used your method and tried to do the same effect; however, when I zoom in my website, the background will also be zoomed in, while your demo website will not. How can I fix this?
Hi Kurt
Do you have jQuery loaded on your page?
HI there, cool code Simon, but for some reason the transition doesnt work.
Stephen
Using background-size:cover won’t work, because the image isn’t a background image. As discussed above, you can’t fade a background image. If your background image isn’t tall enough, then you could add some js to resize it dynamically to fit the viewport size. I’ve just opted to use a large image which will suffice for most devices.
I like this tut i have something similar on my site now. I would like to use your code though instead. Only issue is that I need the image to cover the whole background like it does on my site. I tried adding the css “cover” like it is in my site but it does not work? I am still getting white space under the image. I like your code it seems to run much smoother than mine. can you help?
That sounds like just a css issue. The element to be centred needs a width, margin: 0 auto (no comma), and if you’re testing in IE, a valid doctype.
Hi Simon,
Thanks for your great code! I have one problem : I can’t center my “container” (the one with the overall content) div. I’m using the margin: 0, auto css method but it doesn’t seem to work. Any ideas?
Thanks!
If you wanted to add controls, you can adapt this variant of the basic crossfade. The basic code is the same as you’ll see.
@Simon: First, thanks very much for this awesome tutorial 🙂 Have managed to implement this successfully on a WP theme (will have to write up about it sometime or make it into a plugin) but was wondering if you had any advice about a play/pause button? Love how the images autostart with the fading – occasionally some might want to pause it. Thanks in advance!
In the demo I’ve set #background_cycler to width:100%. If you don’t want to do this give it a width and set margin: 0 auto.
You could randomise the next image selection by replacing this line:
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');with script to randomly select the image instead using .eq().
Also, is there a way to randomize the image selection?
How can I get the background to align center top? I’ve used it for the body tag (background-position: center top;), but I cannot figure out how to get your code to align the way I want. I want the top to be at “0”, but it needs to center horizontally within the window without being fixed. I hope this makes sense… 🙂
Have a look at this example for previous and next buttons. You can combine this with the basic slider here.
HI, I just want to add a prev and next button along with auto image cycling. Please suggest me the code to add previous and next button.
Thank you. This worked perfectly.
Instead of having![]()
tags holding the images, I suppose you could have a series of divs, each having a different image set as background, centred, and cycle these. That would effectively allow the background image to extend beyond the viewport when required, which I think is what you’re saying is the challenge.
Simon,
Thank you for this. I’ve been using an implementation similar to this, but I’d like to be able to style the images at 100% height and width, without the image’s aspect ratio getting messed up (basically, the image centered beyond the edges of the window). Sort of like background-size:cover. I can’t get this to work whatever I try. Any thoughts?
Thanks.
I’m not really seeing an issue with your site.
If you are loading large images, it’s better to kick off the cycler on $(window).load() rather than $(document).ready(), otherwise the images may still be loading when the animation starts, which can lead to jerky transitions before all the images have loaded. I have seen an issue with webkit where both a large number of images were loaded and cycled and the images were resized via css rather than shown at their actual size. If your problem persists, it might be worth a reducing the number of images and see if that improves the situation.
Hi Simon,
I’ve implemented this (having translated it to CoffeeScript) on a site that I’m working on and I’m having issues with the crossfade effect in Chrome.
Basically the fadeOut is quite erratic, sometimes it works, sometimes not. It often happens almost immediately, totally negating the crossfade effect. I’ve seen this reported in quite a few places for fadeOut effects but I can’t find any solutions. I wonder if you’ve encountered the problem or have any suggestions?
The site is here:
http://aqualisoffshore.com/
Thanks.
Thank you, Simon 🙂
I found what I want. I’ll comment on the tutorial if I have any problem. Again, your help is very much appreciated..
You can to adapt this script by adding the necessary from the slideshow script with controls to do what you want. It should be straightforward to do.
Hmm.
I’m actually a newbie in JavaScript and not yet fully mastered JavaScript. I understood your script. I searched in google on how to fade change background upon onclick function. But the results were sad. I end up on your informational website.
I need your help, if you don’t mind. I need a script that allows me to change background (not cycle) on a click of a button. Say there is button1, that button1 will give out background1.png . button2 give out background2.png . And the changes in the background is indeed fade.
Can you help me? Your help is very much appreciated. And this info is great too! 🙂
Hancas
There isn’t an easy way to use an image like a css background element, no. The best suggestion I can make is to use a series of divs instead of images, set the background of the divs as required, and cycle the divs instead of images by amending the javascript.
Peter
Not quite sure what you mean. If you’re just trying to cycle an image within a div then does this help? I can’t see any code on your homepage that is attempting to cycle an image – you do however have jQuery loaded twice, which is likely to cause issues.
I would like to be able to use this technique within a div (see my site; change the image) I can’t get this to work.
Thanks
any way to make image scroll and repeat through the page like css background emelent?
Anthony
Yes. If you want to cycle one image on a click, replace the $window.load() code with:
$(window).load(function(){ $('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded }) $('#mybutton').click(function(){ cycleImages(); })Is it possible to make the background fade on click from a thumbnail?
To use this a background image you might try setting up multiple divs with the background images of your choice, and then fading the divs in and out instead of images.
I am using this but i am using a pattern image that need to be repeated x & y as a background. tried removing 100% so far, need help!
Yes, WordPress by default uses .noConflict(), which means you can’t use the $ variable, you need to use jQuery in full.
Thanks for your reply, was it cut off slightly?
I have enqueued jQuery and I have read that sometimes you need to put jQuery(function() instead of $(function()
Is that right?
Steven
You should just be able to include the javascript code on the body of the page, wrapped in
Hi there
How would I add this function to my wordpress website?
I have added the CSS in my styles.css file. Added the HTML on the page I require, it is definitly seeing the images, however the problem comes when the transition is to take place. Where do I put the JS code?
Thanks
Hi Donatas
You can do this by adding
position:fixedto#background_cyclerinstead ofposition:absolute.It is very useful – I really needed changing backgrounds. But I have a problem left – I need to either (preferably) have the images fixed screenwise when I scroll the page, or (alternatively) have the background images repeated when I scroll text. Is it possible? The third option would be to have the page backgrounds change together with the rotating images (so I could adjust the background to match the image)…
Maybe you could suggest me how to implement any of the above?
Maxwell
I’m currently testing using Safari 5.0.4 (on Win 7) and can’t see any appreciable difference between it and Firefox.
Thanks for your comments.
one thing i noticed while using this in safari 5.1 ( 7534.50) is that does work but not as smooth as in firefox,ie or chrome.
is this due to the this browser or can it be fixed somehow ?
Thanks again for this wonderfull code.