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.
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!
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.
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 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.
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
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).
Suddenly from last 1 week this banner stop working can somebody tell why is it so ?? What can be the reason
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
This banner is not written as a WordPress plugin. You have to manually edit the php and css to put them in.
Thank you for your reply,
Would you know which files to edit please.
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
@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.
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
@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.