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.
31 May 2010
Add in Sliding/Fading animation for title attributes.
30 April 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 January 2009
Pause and play share a single button now and I had change the structure slightly to allow HTML text in the rotating slides.
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.js 2.17KB
jqbanner.zip 35.7KB
jqbanner_v1.zip (Old version) 35.1KB
Copyright © 2010 mclelun.
wow! this is nice! ^_^ i’m looking for this, but been lazy to google.. thnx lun~!
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.
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
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);
i is like!!
[...] jQuery Rotating Banner 1 [...]
This is awesome! I would like t make it play with a horizontal slide. How do i do that?
Don
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.
great banner! out of interest, could you tell the name of the font in the header image for this post? custom?
I think it is Debussy, can be download at dafont.com
Is there a way to get the title attribute to go up and down when sliding through the slides
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.
Hey. I like it.
How do I implement jquery easing within the js file?
Hi. 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?
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: autohas anyone tried this in squarespace? any ideas on how to get this in a squarespace site?
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.
@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.
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.