SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rotating image banner?

    Hi guys,

    I'd like to create something like the banner at the top of this page in Javascript if that's at all possible? I know that one uses Flash, but I'm not a huge fan of that myself and this seems like something that could quite easily be done using Javascript, but I'm not really sure where to start.

    Is this possible in js? Are there any pre-compiled libraries or scripts that'll help do this?

    Thanks

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My god, what a hideous website.

    I think what you need for this is JS's window.setInterval() function. A basic version:
    Code:
    var images = ['img1.gif','img2.gif','img3.gif','img4.gif'];
    var counter = 0;
    window.setInterval(function() {
      counter++;
      if (counter == 4) counter = 0;
      document.getElementById('banner').setAttribute('src',images[counter]);
    }, 2000);
    It assumes there's an image the the id 'banner' and it'll change the src attribute every 2 seconds. If you want the links at the bottom too, that can easily be incorporated.

  3. #3
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's cool, thank you! is there anyway to make it so it's animated or looks a little bit fancier? I think that's the kind of thing he's after though, but just a little eye candy too if possible ;o

  4. #4
    SitePoint Zealot pixelz's Avatar
    Join Date
    Nov 2006
    Location
    Durban
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey .Rich.

    By the looks of things that rotating banner you are looking at is done in Flash. Raffle's code is ideal for rotating different banner files (these could be Flash files) but pure javascript wouldn't allow you to do too much animation very easity. I'd go for Flash if that's what you're after.

    Cheers

    Pix

  5. #5
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aww that's a shame, but many thanks anyway Is there no way at all I could even put some sort of animation into Raffles' code?

  6. #6
    SitePoint Zealot pixelz's Avatar
    Join Date
    Nov 2006
    Location
    Durban
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do some DHTML, but that quite complex stuff and you wouldn't really get the results you're after, also not exactly well-supported either.

    Where Raffle loads gifs, however, you could load flash files (.fla) and just make sure the setInterval is long enough to allow the animation length inside the fla file.

    HTH!

    Pix

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, you can animate it with javascript. Look into the effects library at http://www.mootools.net, the documentation is fairly good and you should be able to incorporate that into the code.

    Much easier than doing it yourself and avoids Flash.

  8. #8
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jesus that site is absolutely incredible! Thank you so much!

    A huge thanks to others for the great replies too, think I'll end up using something from that though ^^

  9. #9
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pardon the ignorance but which of the functions do I actually have to use? I guess I need to use a modified version of what they've used on their main homepage navigation, but I'm not really too sure how and their documentation really doesn't seem to be aimed at beginners ;o

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Mootools forums seems like a good place to get the help you want.

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I once played about with this sort of effect and I used Fx.Base, which you can find info on in the Documentation section.

  12. #12
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still not having a lot of luck unfortunately, have asked on the forum and read a few tutorials but still can't find anything I'm after

    Any other suggestions please guys? And thanks again for the response so far

  13. #13
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Mootools documentation is pretty good an even has example code. What part did you not understand when you read it?

  14. #14
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for such a late reply, forgot all about it 'til he just requested it again!

    In all honesty I don't even know where to start, I just need to get something that mimics that banner on the Peta2 site, but even after reading the tutorials I don't have a clue which to use.

  15. #15
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the documentation is pretty clear with samples and everything... Do you have any JavaScript skills?

  16. #16
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Gloucestershire
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately nope, not really, nothing beyond messing around with moo.fx anyway.

  17. #17
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JavaScript frameworks really make life easier for people that are not so good with JavaScript. But if you don't understand the examples, then you should maybe at least learn enough so that you get the JavaScript basics. That should be enough and help you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •