From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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!
What are the legal rights for reusing this and selling it?
Great work Mary 🙂
Greatttttttttttttttttttttttttttttttttttt!
Thanks a lot. You’re the best
WOW!!! Realy cool!
AWESOME!!!!
Wow ! Amazing template ! I wouldn’t use this font on the description though…
Wow. This great . You guys are too good here at CD.
Damnnn, giving this for free is maybe the most generous thing i’ve seen in 2011 yet. Nice job, really terrific job..
Yet another eye popping post. Well done =)
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..
Another superb tutorial. guys are really talented.
speaking of talent. can i give you a challenge? combine the shutter effect (http://tutorialzine.com/2011/03/photography-portfolio-shutter-effect/) with the image zooming effect found in the official german football website (bundesliga.de/en). i would appreciate it a lot.
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.)
Amazing again !
Agree with Charles, the description font would have diserve to be in a normal case, maybe.
Thx !
Wooooooow!!! thank you so mach for sharing!!!!
Thank you for sharing this awesome template, the effects are really smooth and the idea really awesome !
Always bringing amazing tutorials and examples! You guys are the best!
another cool script!
Every tutorial you guys post is Simply Brilliant.
Wow…. You guys are rocking in every posts…. Cheers…
WooooW
It’s amazing!
Cool effect. Thanks for sharing
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!!
AWESOME
Mary Lou, you’re the most amazing and creative woman I’ve ever known!!
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.
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.
I love what you do….just pure awesomeness.
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!
I am seriously blown away with your work and your generosity in sharing it with us! Thank you!
Your code is very clean, thank you for sharing again, and again ?
Awesome!!!
Like This ^_^
I Love U Mary =¤
Is there a fix for firefox? It shows up as a square instead of a circle.
yes, it’s not showing up as a circle in FF… any suggestions? further tutorial?
@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
PS:
You also need to add it to:
.cd_content
Such an innovation! Well done.
IE8 is not appearing in the circle effect.
Help please?
Hi!! This is awesome! Congrats! …I have a doubt.. Is possible to do this with videos instead mp3?
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!
@Sarah,
I think there is a problem loading the second image: GET http://sarahjudge.com/kevrocbeats/images/2.jpg 404 (Not Found)
All the images referenced in data-bgimg should be there otherwise it will not load. Hope it helps, cheers, ML
@ 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!
ML- I love this! Any idea why the songs won’t play in Fire Fox?
You rock btw! =)
1. Thank you!
2. Hmm… It plays in mine Firefox.
This is great, you are great, thanks Mary Lou!
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? 😀
Very nice.. some problem, ogg for mozilla, mp3 for IE… other problem, circle for mozilla, box for IE. Sorry I am not speaking english.
absolutely stunning
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!
Hi Brian, you should position the navigation elements just like they are positioned here:
http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/
Basically you set the top to 50% with a negative top margin of half of their height. Hope it helps, cheers, ML
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.
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.