This method is completely standalone and does not require jQuery or any other plugin or library. It has been tested and works in latest versions of all browsers.
View a demo here (right click to get the whole source at once) or view the step-by-step instructions below...
Please see my note before copying my code - thank you! >
Add this between your head tags. You can tweak the speeds etc in the BANNER SETUP section at the top.
//ROTATING BANNER BY CIARAN O'KELLY 2012 - BLOG.CRONDESIGN.COM
//BANNER SETUP:
var imageCount = 5; //how many images in total?
var changeSpeed = 3; //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25; //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id){
return(document.getElementById(id));
}
function changeOpac(obj, opacity) {//change the opacity for different browsers:
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage(){
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function(){ //run fade on interval:
if(opac < 100){//continue fade:
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}else{//end fade:
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 1000/fps)
topImgID = nextImgID; //prepare next fade
}
function startBanner(firstImageID){
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*1000);
}
Add this to your stylesheet and tweak to your liking:
.banner{position:absolute; z-index:1; height:230px; width:720px; top:0px; background:#FFF; border:solid 1px #CCC}
.banner h1{position: absolute; bottom:20px; right:20px; font-style:italic; color:#444; float:right; width:50%; font-size:40px; text-align:right; line-height:100%;}
#banner1{background-image:url(banner1.jpg);}
#banner2{background-image:url(banner2.jpg);}
#banner3{background:#F90}
#banner4{background:#FFC}
#banner5{background:#99CCFF}
Add this to your html and tweak to your liking::
<div id="banner1" class="banner">
<h1>This banner fades between images</h1>
</div>
<div id="banner2" class="banner">
<h1>It runs on a loop</h1>
</div>
<div id="banner3" class="banner">
<h1>The images are actually div tags</h1>
</div>
<div id="banner4" class="banner">
<h1>So they can contain text, colours or other content</h1>
</div>
<div id="banner5" class="banner">
<h1>You can control the speed, the start image & number of images</h1>
</div>
<body onload="startBanner(1)">
47 comments:
How would I make each banner frame link to a url?
You can add links to each frame inside the div tags. If you want the whole banner to be clickable, simply style the link with display:block; width:100%; height:100%;
Awesome, thanks. Will give it a try.
Works great. I was trying everything except the obvious to get links to function.
how can i stop the loop? only single loop only?
Something like this should stop the loop at the end:
if(nextImgID == 1) clearInterval(changeInterval);
Add this line below the comment that says //end fade:
Thanks so much for this!!! It runs so well and is so easy to tweak - really appreciate that as I'm still a beginner. Thanks for this great support.
Thank you
Thank you for your code.
This is just what I was searching for.
Thanks so very much for this. It works wonderfully. It's not currently working in safari but it was at first I've got to go back and make sure I didn't change anything.
Dear Ciarán,
thanks for this great script. Just finished adding it to my site. Have a question though. Do you have a solution how to pause the banner when hoovered?
this works great...just one problem. how in the world do you center this? ive tried every which way and it won't budge.
Hi,
To pause the banner you can simply use
clearInterval(changeInterval)
To start it again you need to reset the interval:
changeInterval = setInterval(changeImage, changeSpeed*1000);
@Zachary I dont know what you mean by "this"? The banner is absolutely positioned so you would need to manually set the left & top attributes in the .banner{} style if you wanted to center the whole banner. Try this:
.banner{left:50%;}
can we add two banners in one page. its not working
thank you!
I tried to center it also, using the left:50% like you suggested to Zachary before. That just moved the left edge of the div to 50%. Is there a way to "relatively" position the banner so that I can center it horizontally ? My website is centered horizontally so I would need the slideshow to be centered also. Thanks in advance!! Do you take contributions ?
Sorry @Dan I should have said, you need to add a negative left margin to the absolute positioning to make the banner display in the center of its parent:
.banner{ left:50%; margin-left:-360px; }
(donations link added now ;-) )
@Anonymous, yes, it is technically possible to get two banners working on each page. You would need to go through the script and make the global variables (the ones that are set a the top of the script) unique to each banner. It will probably take a bit of fiddling to get it working.
How much would you charge to customize this script so that it would no longer have an absolute reference, so that I could relatively place it where ever I needed it ?
Hi Dan, there is no way to do this without absolute positioning unfortunately. The whole point is that the divs are stacked on top of each other and faded out as needed. If you put position:relative on the parent element of the main banner div, you may be able to position it in a more familiar way
Nice Blog...!!
Hi,
The first part seems to disagree with other script, is there a way to name the function:
function $(id){
return(document.getElementById(id));
}
And later in your script:
var fadeInterval = setInterval(function(){ //run fade on interval:
Thanks
Thanks Dear
It works perfectly, thanks a lot!
PS. Your notice is in my code ;)
Hi thanks for this.
I have it working in Chrome & Firefox but for some reason it doesnt scroll in ie8 it just sits on the first slide, any ideas?
Thanks in advance
Hey man, thanks a lot for this. Really helped out.
This is wonderful. Suggestion for those wanting to format this differently (i.e. centred, more on a page, etc.). I created the slideshow in its own page just as you have it. Then, in the page where I wanted the formatting, I put an iframe with height and width the same as the slideshow and with no border. The src of the iframe is the slideshow.htm. Worked like a charm.
Hi
would you know how to include the numbering to the rotating banner? so user can click to view which banner they want
eg. this website
http://www.rubytuesday.com/
I'd also like to add numbering or a thumbnail to select which is displayed like Kelvin asked.
I think this could my problem but I need some help.
1. When I paste the first code inside the Head tag it is not seen as code, only black text. I tried saving that code as a separate .js file and then referencing it from inside my Head tag but I don't think it's being found.
2. Is the CSS needed? When I used it everything stacked up at the top of my sidebar. When I removed it everything lined up in my sidebar as I wanted.
3. I'm using some other code to only display as many banner ads as the length of the Content Div so I don't get over-run. It works well but right now the rotation code is not working so I can't be sure of anything.
var sb=document.getElementById('sidebar');
while (sb.offsetHeight>document.getElementById('content').offsetHeight){
sb.removeChild(sb.lastChild);
}
4. Finally, my goal is to not hard code my banner ads into each page since that makes updates a real pain. How do I use your code to access another file containing all of my available banner ad code so I can just update my ads from a single file.
You can see what I have so far on my test page. I appreciate the help.
http://www.christian-life-advisor.com/5-things-to-consider2.html
Merry Christmas!
Steve
OK, I apologize for part of my above post.
#1 is fine once I place the code within the correct tags...duh!
#2 is still a bit odd. I eliminated the top two .banner lines and now my banners display in the correct location instead of stacked up, but I'm still not seeing the point of the CSS.
I think the real issue I'm having is how to go about putting all of my CJ, ShareSale, and LinkShare banner code into a separate file that can be read and pulled into each page on my site instead of hard-coding the banner code into each page. It seems that any solution I have found has me hard-coding the banner code into my pages and that is not a desirable solution. Any help is greatly appreciated.
Hey Steve,
I've been trying to get a banner slideshow to work as well and I was wondering how you got #1 to work.
I've currently saved the first code in a separate file as a javascript and reference it within my html code.
nevermind, just got it to work
Hi, I've used your code and everything works wonderfully except when I try to implement it with my webstore. I'm using a template from volusion and the code seems to push the banner to the very top of the screen. Is there a way to stop it from doing that so that it can follow the format of my template?
When I saved a copy of the script to experiment, i found that it would first display banner3, then banner2 for a split second then banner3 again, then run fine after that. (Firefox 17.0.1)
Changing banner3 to have a z-index of 1 seems to resolve the problem, but I have more testing to do.
Very nice script by the way :-)
GREAT SCRIPT!!! However, I have a strange error that I hope you can help me with.
On my banner, I only have 2 images that rotate.
On FIRST rotation and ONLY on the first rotation, the second image will appear twice!
I just want to rotate between image 1, image 2, image 1, image 2 in an endless loop.
What happens is this.. image 1, image 2, image 2, image 1 and then it corrects itself.
Any suggestions?
Thank you
i fixed it, nevermind. Great script. thx
By default this awesome script is always justified to the top left.
How can I pin it to one exact location so it wont move under any circumstance?
Thank you
Nevermind, .banner{ left:50%; margin-left:-360px; } works 100% to center it! Will donate when I finish project. THANK YOU!
Why does the script start banner #5 first even if you told it to start with banner #1 first using the "body onload" code you provided???
I noticed that even your demo does this as well!!!????!!!
All my script settings are at 100% default!!!
I hope this can be fixed so I can use this awesome script.
Thank you
A previous question concerning linking to a website...
"You can add links to each frame inside the div tags. If you want the whole banner to be clickable, simply style the link with display:block; width:100%; height:100%;"
What is the exact coding to add the url links of jpeg banner ads?
hi, the banner is working fine for me, the only problem is that it appears on top of my header, which is an image inside a div.
below my div tag with the image i still have a nav bar and then the body.
how can i make the banner appear below my nav bar??? it keeps appearing on top of everything. thanks.
Ciaran,
This banner rotation works great in Chrome, Safari and Firefox but for some reason in I.E. 8 the banners are not rotating and it starts and is stuck on the third banner in a group of 5 banners.
Can you give some hints in how to resolve please?
how can you center the banner VERTICALLY?
None of this works for me.?
I put all the code within the text in as designated, but all the stuff in the head tag simply appears as text on the page and the banner does not rotate anything. It just appears as a static block on the lower right side of my page. Any suggestions?
Thank you!
Hi there, I have tried this great tutorial with 2 changes within the html and css, but when I run the webpage in a browser, the rotation does not work, it just shows an image of one of the banners. Please can you advise I would really appreciate it.
Thanks
Ciaran,
Great Script it works well in all five major browsers except the last photo in the slide show appears first then jumps to the beginning of the slide show and it works beautifully after that.
By chance do you have any recommendations that will correct that? I have it on several pages on my site but I have changed the number of photos and and increased the duration between each fade.
Thanks for the great script and any help you can lend.
my last banner is place permanently visible in fron rest banner a quickly fade and hide behind it whats matter is that could you help me out with this
Post a Comment