Building a Javascript Ad Rotator / Slideshow (with 123 buttons, play, pause and stop options)
August 22, 2008 by MK
Filed under CSS, Javascript
This script work in all major browsers - IE6, IE7, Firefox 3.0. You can even rotate images and flash objects as everything within DIV’s will be rotating.
Example of Banner Rotation using this script -
These are real banners rotating using this script. You can click on 1 2 3 buttons to see a particular banner or play / pause the rotation. Banners sequence will change randomly everytime you refresh the page
The idea is to pick up all the DIV’s within the main DIV container and rotate them randomly.
Here is an example of the Ad Rotator / Slideshow with some CSS thrown in and play/pause, 123 buttons. Please feel free to use the CSS and code. Leaving the reference back to my site (http://www.coolwebdeveloper.com) in the comments will be much appreciated though.
We will be using a set of open source scripts in addition to my own code to build this javascript adrotator/slideshow.
Please scroll to the bottom of the article to download the zipped files package that we are going to use for this project.
You will find a number of methods inside slideshow.js to control the slideshow. At the top level is a javascript class used to initiate the slideshow object from the HTML file.
Some of the options that can be set are - duration - sets the total duration of transitioning per image Following functions are used to control the behavior of the slide show - forward()
seconds_per_slide - sets the time per image/div is shown
pause_on_mouseover - whether the rotation will be paused when mouse over happens
onChange: function() {} - You can define here, any javascript code that you want to run when the image changes
backward()
jumpToSlide()
start()
pausePlay()
stop()
rndm()
transition()
Class can be initiated by using following code - You can pass any available number of property values when defining the rotation class
var slideshow = new MDSK.Slideshow(”slideMainDiv”, “.slideDiv”, {
seconds_per_slide: 5.0
});
The random() function is used to change the rotation pattern every tine the page is refreshed, as a result the images contained within the object are displayed randomly.
/**********************************/
rndm : function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
},
/**********************************/
and then we will call this function every time the class object is instantiated
/**********************************/
this.slides.sort(function(a,b){
return me.rndm(-1,1);
});
/**********************************/
Please fill in the following information to receive the Javascript Adrotator code with fully working example via email and to subscribe to FREE Newsletter and email feed.
Your email address will also be used to provide any important updates and new versions for Adrotator script in near future.
All the scripts are pretty self explanatory but if you have any questions please dont hesitate to contact me by leaving a message in the comments section.
There is a lot of room for improvement in this code and lot of inline CSS can be moved to CSS file. Also, I am working on a wordpress adrotator plugin (enhancing this code) and will be releasing soon. So keep checking this site.
Related posts brought to you by Yet Another Related Posts Plugin.
This is an awesome script, i am downloading it right now and will be uploading on my site….this will rock the blogging world
Great work! Is there a way to remove the play/pause and the numbers under the slideshow? Thanks!
Oops! I found it already. Silly me. Thanks again!
Great script! How do you disable the automatic rotation of divs? I want to be able to initiation the rotation by clicking the play button. Thanks!
Hello Daniel, Thanks for your comment.
To disable automatic rotation you can comment or remove the call to start function this.start(); from the following class initialization function in slideshow.js file -
Object.extend(MDSK.Slideshow.prototype, {
and that will do the trick.
Thanks for the great script.
First off, please bear with me. I’m super new to this stuff. I’m amazed I’ve gotten this far. While the design elements are close, I’m not quite finished with them either.
Here’s the thing: I’m having just a little problem with the slideshow images doing a little jumpy thing when they switch from one image to the next. Probably something to do with reloading the divs or something.
Can you have a look at this and help me with my code?
Thanks
Christopher
chris@chrisknell.com
Again… thanks for the script… I’m diggin’ it big time.
I fixed the problem by adding an iframe in there rather than adding a directly to the main page and it seems to have done the trick. After a little tweaking and fumbling around with table sizes and targets, it’s working great.
Thanks a ton. Works great.
Please have a look anyway and tell me if you think I could optimize it some.
CSK in CA
That last post didn’t post properly because I used “<”.
should read as:
” fixed the problem by adding an “iframe” that breers to another html page in there rather than adding a “div” directly to the main page and it seems to have done the trick.”
Thanks
Hello Christopher, Thanks for your feedback and comments. I dont think you need to use an iframe. This should work without using an iframe. I will look into your page and will email you back, Thanks again.
looks great, its exactly what i am after. thanks for sharing
Hello Christopher,
I have checked your code. The slideshow is jumpy because your div’s height or width is not defined properly, that means an inner DIV has more height or width then parent DIV. And when code tries to show/hide then it hides some part of the DIV with improper height or width.
This make content jump in IE7 and 6, should be okay in firefox though. Let me know if you still see issues.
Very cool info. thanks
I’m using two Javascript libraries that conflict with each other, one is this slideshow and the other is MooTools Accordion. Both use the variable Element, so is there a workable way in which to rename this scripts variable from Element to something else?
I have tried using Dreamweaver’s ‘Replace All’ function to rename Element to Element1, and elements to elements1, and again to ElementOne/elementsOne, but to no avail.
Have any advice?
this is a great plugin ..I am downloading it now , will mail you incase of any issue..thanks for your help
Hello this is a great. I’m attempting, not very well i might add, to make it so that it can be used multiple times on a page. Do you know of a way to use it like that?
I’d like to set the order of the images and have them display in the same order every time the page is loaded/refreshed. How can you turn off the randomness?
One more question, how can I add additional images (say 5 total) to the rotation?
Hello Rich,
To remove the randomness, comment or remove rndm() function in slideshow.js
And to add more images, just add a nother slideshow div with the image inside and you will be good to go.
Thanks,
MK
Yeah, cool script indeed.
I’ll put it in my blog header.
Need to customized it first.
Thanks for the script.
Hi man!
As everyone said.. thanks for posting this… I have made some upgrades to the css that will remove the need for spaces at the number’s sides and the gray line at the bottom.
Let me know if you want it! Either way, thank you so much! :D It rocks!
By the way, while going to Christopher’s page, http://virtualhde.com/iphone2 page, i got my computer inffected with Bloodhound.Exploit.196…
thought you might want to know that…
Very cool script. How can I change it to two images only? And also before and after instead of 1 & 2?
how can i remove 3 since I have only two images?
Hey, I got smarter all of a sudden and solved all my questions. Many thanks!
Hello Ben,
Its good to know that you were able to solve the issue. Do let me know if you have any other issues, I will try to reply back ASAP.
MK
It is a very cool script. I like it a lot. Thank you so much.
I have a question about how to automaticly stop the slideshow after a given number of runs. How difficult to do it? Can you give me some ideas?
Thanks Edgar, I have since removed that link from his comments.
MK
Never mind. I found my solution.
I confirmed my registration via the email link sent to me but have not recieved the download link for the script. Can you please resend it? Thanks
Hello Jeremy,
Code was resent to both of your email addresses in our system. euclidlibrary.org domain was blocking the zipped attachment. So please check your other email.
Subject of the email - Javascript Ad Rotator Code - Coolwebdeveloper.com
Please make sure you check your SPAM folder too just incase.
Thanks for visting coolwebdeveloper.com and do let us know if you still havnt received it and we will upload it to our server for you to download and we will send the ldownload link to you.
Awesome script, thanks!
Question - the “pause on mouseover” doesn’t work for me - I’ve set the “pause_on_mouseover” flag to “true”… is there anything else I need to do to enable this?
Thanks!
Actually - I got the pause on mouseover working!
Is there any way to toggle the button to be “play” when “pause_on_mouseover” and then switch back to showing “pause” on mouseout? I tried adding the “toggle” JS function, but this threw me an error.
Thanks!
Hello Jen, Thanks for using this script and your comments. Are you trying to implement mouseover on the rotating DIV’s or on the 123 buttons?
If you are using mouseover on 123 buttons then you can call toggle() on mouseover on the anchor tag. And then call toggle() again on mouseout while changing the value of togle accordingly. Do let em know if you still need help, Thanks.
Hey its really cool and very easy to use ..
thank you very much
hey.
I have a problem with FF. I have 6 images & I wanted the images flow in sequence 1-6 so i made following changes in Slideshow.js
this.slides.sort(function(a,b){
return (0);
and commented the sndm(); function.
it works fine in IE & safari but images not flows in sequence in FF. it picks randomly. any solution?
One solution is to stop calling the rndm() function totally. You can comment this function where its been called.
What a great script! Thanks for the code.
One problem I am having is that when I increase the size of the div holding the item numbers on the bottom, only the area immediately to the left & right of the text and thin border to the right is clickable. The area under the text is not clickable. I would like for the whole div to be clickable if possible.
I added an onclick to the divs vs. the href which works for about 2 seconds, and then it goes away. At that point, the area under the text is not clickable again. When it changes to the next number, it is once again clickable for about 2 seconds and the problem keeps repeating. Any clues how I can fix this?
Hello Ron, Try using lists (<li>) instead of DIV’s and that should fix the issue.
Looks Great but it appears that download is not working. I confirmed my registration via the email link sent to me but have not recieved the download link for the script.
Thanks
You should get an email with attachment. Please check your spam folder. If you still did not receive it, do let us know or email us - info [at] coolwebdeveloper.com [dot] com and we will attach it for you, Thanks.
is there a way to have one or more of the images be able to have a link?
is there a way to adjust the size of the box the images rotate in..
yes, you need to change the size of the div containing the images. And increase the size of parent div. That is it.
yes, just put an anchor tag around the images and you are good to go.
I want to eliminate the randomness of the images. I’ve already commented out
this.slides.sort(function(a,b){
return me.rndm(-1,1);
});
AND
rndm : function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
},
But in Firefox, it is still rotating randomly. What else do I have to do to get it to eliminate the randomness in Firefox? Thanks!
Hi -
I added 2 images to the rotation but now the play/pause and image buttons don’t work. In other words, the images rotate, but I can’t pause or jump with the buttons.
I don’t know javascript… at all. :)
Could you please tell me what I need to edit to make the buttons work again.
Thanks.
What other changes do I need to make in order to get a .swf file to run? 1.swf is a short Flash movie.
I have resized the space the .swf will run in but…. No luck.
What am I missing?
Thanks.
ofb
greetings of peace…
i just want to know how to add text in between of pause/play and the pictures?
thanks in advance…
Hi!
I am having one problem on my site with this feature. For some reason when the slides transition, the new slide comes in under the previous one and shifts the whole page down until the previous image drops off. Any ideas what might be causing this?
Daiv
PS. I really appreciate you offering this code. It is 100% exactly what I was looking for and works well.
Just posted a help question, but figured it out by reading other comments above.
All is well and your script is fantastic!
Daiv