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. I use Mozilla Firefox 3.6.16 and i see in the demo a Square.. not Circle..

    i though you wanted to know ..

    BTW.. fantastic job you do.. Thanks a lot!!

  2. Mary Lou
    Safri
    firefox 4.0
    IE9
    Chrome
    Opera

    Seamonkey is the only one that has squares.

    The effects are still lovely even with the squares.

  3. Really nice effect, amazing work. But for the design and usability I am not so sure. The scrolling in the box is not practical, IMHO.

  4. Very nice design, but I must admit – it wasn’t clear at first that one has to click on the album label to get more information. Maybe make the whole “disc” clickable!

  5. I am seriously blown away with your work and your generosity in sharing it with us! Thank you!

  6. yes, it’s not showing up as a circle in FF… any suggestions? further tutorial?

  7. @TMSMITH

    I got it to work in Firefox by adding to the style.css:

    Add to this class –
    .cd_album{
    -moz-border-radius: 270px 270px 270px 270px;
    }

    ~ Harry

  8. Hi!! This is awesome! Congrats! …I have a doubt.. Is possible to do this with videos instead mp3?

  9. Hi Mary Lou! Really love this template, it’s beautiful. I tested it here http://sarahjudge.com/kevrocbeats/ and uploaded quite a few songs. Unfortunately, it just loads endlessly. Do the songs get preloaded, too? Is there anything I can do to fix this? I would be really grateful if you could help me out. Thanks so much!

  10. @ Mary Lou,
    Thank you so much for taking the time to find the error. That fixed it. I had the pic as .JPG in the image folder instead of .jpg. I think codrops is excellent btw. It’s one of my favourite resources and has taught me a lot so far. Thanks again! Cheers and have a fantastic week!