Circular Discography Template with jQuery

Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on next or previous. When clicking on an album, we will open the album details view which contains a music player (jPlayer) and a playlist of […]
circularDiscographyTemplate

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on next or previous. When clicking on an album, we will open the album details view which contains a music player (jPlayer) and a playlist of some songs. There is also a description area that can be scrolled.

We will be using the following jQuery plugins and scripts that will help us with the effects and the functionality:

We’ve added some nice music samples from the following artists:

Audiotechnica – Testing
by audiotechnica

Coffeeeurope -Arena Blanca
by Hektor Thillet

Ramblinglibrarian – Our Resolve
by Ivan Chew

Syenta – Emerging Cry
by Syenta

Thanks to the artists for releasing their music under the Creative Commons Attribution Noncommercial (3.0) Licence!

The initial screen of the template will show some loading element, and we will preload all the images. It will show the album view with the navigation arrows lined up in a diagonal:

When clicking on one of the navigations arrows, we will rotate the album and fade in the next/previous one:

When clicking on one of the albums, we will open the album detail view with a music player, a playlist and some detailed info on the album. The background image will now change to the one we had in the circle of the album before. The music will start automatically with the first song and continue through the playlist:

We hope you like this little template and find it useful!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 67

Comments are closed.
  1. ML- I love this! Any idea why the songs won’t play in Fire Fox?

    You rock btw! =)

  2. I’m pretty much a newbie. Love this template tho! Been trying to get this circular theme merged into a basic sinlge page navigation website based off of this template: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/ , where only the “music” container will use the full music controls and the rest will just open up the circle for text and other content. But I want them all to spin between transitions like this one. Any suggestions? πŸ˜€

  3. Very nice.. some problem, ogg for mozilla, mp3 for IE… other problem, circle for mozilla, box for IE. Sorry I am not speaking english.

  4. Mary, Could you do me a huge favor and tell me how I could get the next and previous arrows to go on the right and left hand side of the album. I want them to be aligned to the middle of the circle and on the left and right hand side. So when the browser is re-sized they will remain directly on the left and right hand side of the circle. Could you please tell me the best way to implement this in the css? Thanks in advance!

  5. Thanks Mary! I have it laid out how I wanted it, but after uploading it to my server and testing it, none of the audio files work once uploaded. It all works great from my “computer” but once uploaded to the server the audio files won’t play. Are there certain file permissions that need to be set? Curious what I might have done wrong since everything works perfect from the desktop.

  6. Actually, it does work…but here are the bugs I’m experiencing.

    1. The circle is a square in internet explorer
    2. In google chrome, the playlist is shoved up past the top of the browser, you can’t even see the player controls or half of the playlist.
    3. The player is not working in mozilla firefox.

    I’m guessing that you don’t offer support to fix these issues? I was really hoping to use this template. =( It used every feature and almost the same design as I was originally mocking up for this project.

  7. Hi Brian,
    the circle is square in any IE version under 9 because rounded borders are not supported. Let me know which Chrome version you are using because I’m not seeing that problem (I have 13.0). Same for FF (which version), because the songs play on ver 5.0. I’d love to offer support but I’m completely booked out, so I hope I can at least point you into the right direction! πŸ™‚ Cheers, ML

  8. I accidentally hit submit comment, wasn’t finished. πŸ™‚

    It does work on internet explorer, I tested it on a couple other computers running internet explorer 9, the one I tested on before was xp (no ie9 for xp). No biggie, that stuff is outdated anyways. πŸ™‚

    So to sum it up, the only browser I am having any trouble with is the latest Firefox.

    Also, one other small thing, which I’ll do my best to research (unless you might have a quick fix for) is when viewing on an iPhone, the selected song doesn’t have it’s “highlighted” attributes to show which track is actually playing. Not sure if you know a work around for that. Thanks anyways, great template. I would have paid for this one. πŸ™‚

  9. Also, I was running google chrome 13 (the latest updated version I thought). Can’t find a google chrome 15 download. I saw a 15 provided to testers with Mac OS X, but no official release on that yet? You should check it out in the latest google chrome 13, it’s quite a mess. πŸ™‚

  10. I wish I could edit posts.

    Ok, it seems like there are just bugs with windows xp for me.

    On my other computers and OS, the layout is perfect in google chrome, IE, and Firefox BUT the audio files won’t play in Firefox v6.0.1

    Also, while viewing on my iPhone4, it doesn’t show which song is selected and currently playing like it does in the browsers on my computer.

    That’s my update, you could delete my other two posts before this please to free up any confusion.

  11. Dear Mary Lou,

    I try to youse Your amazing template for my WEB-Site. It works quite well in all browsers, but when I add a 5th CD it displays only the background image but not the Thumb.
    What could I do?

    • @Gerhard you need to add in your CSS file something like

      .cd_album_5{
      background-image:url(../thumbs_disco/5.jpg);
      }

      I know, this should have been done dynamically :S
      Hope it helps!

  12. Thanks a lot for Your tip. I really didn’t see definition for the cd’s background image. Now it works.

  13. Absolutely fabulous.
    the Chill music makes it all the more to enjoy the visual greatness of this one.
    Great impressive works.
    πŸ™‚