While I was working on the revamp of my site, I noticed I could use a rotating banner in the landing page to show certain works or blog post that I wish to highlight. My first thought was to develop this with Flash, but I changed my mind after thinking that banner like this could be done easily with just JavaScript.
While developing this banner, I used a JavaScript Framework, jQuery to speed up the development process. JavaScript is not my strongest point, but I managed to come out with a simple rotating banner. You can view the banner in this page.
Currently, the banner will rotate automatically every few seconds and can be pause or resume anytime by clicking the button on the banner. You can go through the banners by clicking the next or previous buttons too. Slides information text is grab from the container DIV. so, you could basically put text, images or both into the rotating slides.
This simple banner rotating script was not written as a plugin. You will need to do some editing on the page you want to display this. There are only few simple steps you need to do.
1) Include the JavaScript and CSS
Include jQuery library, JavaScript and CSS for this banner in your page header. You can cut and paste the CSS into your website main CSS file too.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" />
2) Include the list of banners
To tell the script which images in your page are for rotating banners. You will need to construct the DIV in the following structure. The number of slides is count automatically through the JS. So, if you experience “extra slide” bug, it is probably because there is an extra or missing DIV tag in your page.
<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div>
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div>
<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
The script for this banner is quite simple and self explanatory. To use this rotating banner, you will need to download the zip file which contain all the images, CSS and sample HTML page.
jqbanner.zip 35.7KB
jqbanner_v1.zip (Old version) 35.1KB
31/05/2010 – Add in Sliding/Fading animation for title attributes.
30/04/2010 – Change to horizontal scrolling of slides, it still can be easily modify to vertical scrolling. The old script of fading in and out of slides is still in the JS.
16/01/2010 – Pause and play share a single button now and I had change the structure slightly to allow HTML text in the rotating slides.
Copyright © 2010-2011 mclelun.
Hey there, I am trying to integrate this into Squarespace and don’t know what stylesheet I need to import the code into and to be honest, even how to edit it to match my needs.
Any tips for working with Squarespace. I can get access to Dreamweaver or flash cs4/5 if I need to but any help without that would be helpful too.
thanks
Hello, onbermejo is right, there’s a bug in the part that handles clicking on the arrows. It is clear when you click twice in one direction, then try to go in the other direction. First jqb_vGo must be set, then call jqb_fnChange().
Hi mclelun,
This banner is the best!!! Congrats!
I have a question. Is there a way to (on load) remove the effect of sliding (the hidden next contents) for right?
Tks!
2 questions – I adjusted the size of the image to be 500px wide and now the next button does not display (chrome only) any ideas on why?
Second (and I am a noob so sorry if this is basic) but how do I preload images. been searching for a preloader – but can’t seem to figure it out. any help is appreciated
The images on my website overlay eachother.
When you load the page, you will Image-1 and 20% of Image-2 on top of Image-1 (right side).
When it slides to Image-2, you can see 20% of Image-3 on top of Image-2 on the right side.
I have only changed the height(171px) and width(565px) in css file.
And it shows double previous,next,play/pause buttons in Internet Explorer (mirrored vertical)
</div
Any tips?
I want to put this into an apdiv. How can I do this?
It screws EVERYTHING up when I try to do this. Any ideas?
how can i insert this into an apdiv in dreamweaver?
I have made a change:
If you click “next” then “next” and then “prev”. This last “prev” that you have clicked dont do the prev but the next time you click “next” yes. Why?
The code i have changed:
$(“#btn_prev”).click(function() {
jqb_fnChange();
jqb_vGo = -1;
});
$(“#btn_next”).click(function() {
jqb_fnChange();
jqb_vGo = 1;
});
I have put the jqb_vGo BEFORE jqb_fnChange() function is called:
$(“#btn_prev”).click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$(“#btn_next”).click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
I like your implementation
thanks for sharing
Oops, looks like it only works for the images, and puts the text on top of the first slide when it loads. Oh well, for me it works because I’m only using images anyways
By the way, thanks for this great script mclelun!
@David
I think I was able to do what you’re looking for by commenting out one of the lines.
Inside jQuery(document).ready(function() {
jqb_tmp = ((i – 1)*460) – ((jqb_vCurrent -1)*460);
//$(this).animate({“left”: jqb_tmp+”px”}, 500);
I’m not sure how it loads for every browser, it seems that it either flickers very quickly, putting the slides on top of each other, or just loads the first slide like you intended. Either way, it probably beats the sliding effect you can catch for half a second on load.
I’m also wondering the same thing as William:
“Is there a way to hide the loading process and just show the 1st slide? I love the code and i’ve been trying to figure out a way to avoid seeing that initial slide right with all the slides on queue.”
I know my way around jquery a little but can’t figure out how to get this working either. Any tips?
oh crap. that was embarassing. lol
thanks mclelun! that fixed it.
@William, It can be done by preloading the images first with jQuery. But I didn’t implement that in my script.
@tupe, I think the problem occur because you embedded the jqbanner.js twice in your page.
Great job on this one!
I recently encountered playing Flash in iPhones and iPads and this solved it.
I re-sized it according to my website’s requirements but something went wrong when I click the buttons. When I click the buttons, it skips an additional slide. Can you enlighten me with this one? here’s our website:
http://www.benchtm.com/
Thanks!
Is there a way to hide the loading process and just show the 1st slide? I love the code and i’ve been trying to figure out a way to avoid seeing that initial slide right with all the slides on queue.
Thanks so much for this mclelun. It’s fantastic! Is there any way to remotely change the images and links via CSS, so that for example, banners and their links could be rotated across an entire site?
@Vijay
Yes, in the
jqb_fnLoop()Find the following code
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
and replace with
jqb_vCurrent == jqb_vTotal ? jqb_vGo = -1 : jqb_vCurrent++;jqb_vCurrent == 0 ? jqb_vGo = 1 : jqb_vCurrent--;
I didn’t test, but should work like what you describe.
Hey mate, awesome banner!
I was wondering if its possible to make the banner go left to right 1,2,3,4 as normal, then when it reaches the last banner make it to go backwards 4, 3, 2, 1 and stop at each banner instead of sliding all the way back to the first banner really fast?
Cheers,
Vijay
@oliver, in the file which you want the banner to appear. maybe header.php or sidebar.php
@Ram, quick way is to edit the
jqb_fnLoop()function.Set interval call to maybe 1 seconds.
Add a new variable to track how many seconds have pass at Interval call.
If 5 seconds passed and current slide is first slide. Then move slide. Reset variable that track seconds to 0.
If 10 seconds passed and current slide is not first slide. then move slide. Reset variable that track seconds to 0.
Other interval call, just add 1 to the tracking variable.
Hi mclelun,
This banner is really simplest way of doing great work.
I have a question. Is there a way, we can show the very first image for different duration than the rest of the images. i mean show first image for like 5 seconds and rest of them for like 10 seconds.
Thanks,
Ram
Thank you for your reply,
Would you know which files to edit please.
This banner is not written as a WordPress plugin. You have to manually edit the php and css to put them in.
I’m using a theme like this one http://congomikili.com/
How do I install this nice banner ratator for my wordpress theme to appear like in the website above
Thanx
Suddenly from last 1 week this banner stop working can somebody tell why is it so ?? What can be the reason
hmm. I dont know how to do it. Oh i got simpler explanation what i want: i want this slide to be always in one direction = from right to left even in last slide (between last and first div).
You have to edit the JavaScript abit, check whether it reach the last (“vTotal” variable) or first slides. If yes, change the “vGo” variable to 1 or -1 to change direction
Hi mclelun. Great baner animation
. I got a question. Is it possible to make something like this: the last picture (in this case div with tekst) is showed up from right side to left and then is looping from the beginning but animation from 4 to 1 div is from left to right not from right to left like in other (form 1st to 2nd an so on). How to make last slide (from 4th to 1st div) from right to left.
Include the banner’s CSS, JavaScript in your website, by adding these lines the wordpress header.php.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" />
Then you cab add the banner in the website by adding the
jqb_objectdiv, you have to edit your header.php, index.php or single.php depending on where you want the banner to show<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title="Links!" ><a href="http://www.mclelun.com/link/"><img src="img/banner_link.gif" title="" alt=""/></a></div>
<div class="jqb_slide" title="About Me"><a href="http://www.mclelun.com/about/"><img src="img/banner_about.gif" title="" alt=""/></a></div>
<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
Hi, I just found the link to this and think it is really neat. I am no programmer but I knowbasic stuff. Before I mess with anything, I just want to figure out what to do first. I downloaded the zip and unzipped it and saw the files. I am running a buddypress site and it has jquery built in I was told. The site is http://newtown.mobi I want to place a horrizontal rotatig banner under the header if possible or basicly anywhere but towards the top. Do you have instructions? I.e where to place the files, how to name the new image files. Sorry if I do not make sense.
Great, I just downloaded and will give it a try. I actually wasn’t looking for any JavaScript, I was just trying to find any information regarding jQuery banner as I was informed by my SEO consultant that the flash banner at my website homepage is not SEO friendly as it doesn’t help for indexation, so I did some research on if I can replace the flash banner with similar jQuery banner…I guess this is a SEO friendly banner format? anyway, thx!
I managed to get 3 banners to work here:
http://revivemediaservices.com/fwbc_beta/
However can you please help me fix the text on the first box? It animates fine the first time but when it loops through and shows it for the 2nd time, the text “jumps” into place.
Can you please tell me how to keep it from doing this?
It looks like it loads it in and then applies the CSS width to it so the text goes outside of the box as it slides in and then clicks into place. Is there any way to keep this from happening?
Just watch it for a minute and you’ll see what I mean.
@slumpy
Sorry, not really sure about that.
@Brandon
I didn’t think about having multiple banners on a single page when I did this. So, it require some changes on the script.
But I think 1 loop and 1 ready function is enough. The ready function will initialize the 3 banners, and the loop functions will loop those 3 banners.
How would you recommend making 3 of these rotating banners on one page? What would need to be changed?
It looks like you would need 3 jqb_fnLoop functions as well as 3 ready functions.
has anyone tried this in squarespace? any ideas on how to get this in a squarespace site?
You need to adjust some CSS at
#jqb_object .jqb_btnand maybe some other place as well. Most of the time we can center elements withmargin: autoHi. Thanks so much for this. I love it and it has solved a huge problem!
One thing I’d like to know is how can I change the position of the buttons on the right? I’d like them to be centered.
I’m using it now for one of my clients, and to get the effect they want, I’ve had to take away the black bar at the bottom so it’s completely transparent, and not use any title text. I’ve also changed the look of the buttons.
All I need to do now is move the buttons from the right to the center of the image.
Any ideas?
Hey. I like it.
How do I implement jquery easing within the js file?
Hi Jamie, please download the latest ZIP files. In my sample, the title attribute slide left and right. But you can make it to vertical sliding by changing the parameter “left” to “top” in the JS.
Is there a way to get the title attribute to go up and down when sliding through the slides
I think it is Debussy, can be download at dafont.com
great banner! out of interest, could you tell the name of the font in the header image for this post? custom?
Hi Don, I made some quick changes in the JS, the slides now scrolling horizontally. You can download the latest ZIP file to view it.
This is awesome! I would like t make it play with a horizontal slide. How do i do that?
Don
[...] jQuery Rotating Banner 1 [...]
i is like!!
You can remove the “height” attribute in the script as well.
This will animate with opacity fading only.
$(this).animate({ opacity: 'show' }, 500);
$(this).animate({ opacity: 'hide' }, 500);
Nevermind, I answered my own question! I changed “animate” to “fadeIn” and “fadeOut” as shown below:
$(this).fadeIn({ opacity: 'show', height: 'show' }, 800);} else {
$(this).fadeOut({ opacity: 'hide', height: 'hide' }, 800);
Just thought I’d share the knowledge for other jquery n00bs.
Here’s the jquery effects page: http://docs.jquery.com/Effects
This is very cool… however, what should I do to change the animation to something other than coming up from the bottom? I’d actually like to be able to just fade it.
wow! this is nice! ^_^ i’m looking for this, but been lazy to google.. thnx lun~!