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 […]

View demoDownload source

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!

View demoDownload source

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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

  1. 8

    Damnnn, giving this for free is maybe the most generous thing i’ve seen in 2011 yet. Nice job, really terrific job..

  2. 10

    One request though, i love everything you guys make, and i mean everything, but could you guys make sometimes a video template, possible with .mov files or mp4. I would really love that. There are very few video templates around, and all of them are ugly..

  3. 12

    Demo looks great! My only request is that vendor prefixes are added to the border-radius property. It loses the namesake circular shape in older but still recent browsers (like the FF3.6 I type this in.)

  4. 13

    Amazing again !
    Agree with Charles, the description font would have diserve to be in a normal case, maybe.

    Thx !

  5. 15

    Thank you for sharing this awesome template, the effects are really smooth and the idea really awesome !

Follow this discussion

Leave a Comment