Line25

Display Your Favourite Music with jQuery & Last.fm

Read the full post

Use the power of jQuery and the handy last.fm records plugin to create a showcase of your favourite music on your website. We’ll install the plugins to fetch the information from the Last.fm website, then style up the design with a cool retro vinyl record theme.

View the demo

The design we’ll be creating lists out the top albums from our Last.fm profile by displaying the cover art with a subtle shadow. When the link is hovered, a retro vinyl record will slide out from the cover, purely for visual interest and extra cool factor points.

View the demo

Creating the concept

Record and sleeve sliding concept

In order to build the working website, the basic idea and the graphical elements need to be creating in Photoshop. We’ll need to design a background for the demo, the vinyl record image and the subtle shadow graphic.

Create a new document in Photoshop with a width of 2000px. Fill the background with grey and add a subtle noise texture using the Filter > Add Noise menu.

Paint a strip down the center using a large soft white brush. Change this layer to around 20% opacity.

Source an album cover to represent the covers that will be inserted by the Last.fm records plugin and scale it to 126px. Paint a dab of a soft black brush and press CMD+T to transform it.

Squash the brush mark and place it underneath the album art to form a shadow. Adjust the opacity of the shadow to tone down its impact.

Source a photo of a vinyl record and clip out the background using the marquee tool. Scale down the record to fit the dimensions of the album art.

Toggle off all the layers and export a selection of the vinyl record. Use the PNG-24 format to allow for alpha transparency.

Also save out a selection of the shadow as a PNG with alpha transparency.

A thin selection of the background can be exported as a JPEG which will then repeat vertically. The 2000px width will fit inside the majority of screen resolutions.

Writing the HTML

The HTML for the demo is pretty simple. We have the basic structure of Doctype, linked up CSS stylesheet and an introductory H1, then the Javascript files that do all the work are referenced. Firstly we need the jQuery library to power everything, then the handy Last.fm records plugin from Jeroen Smeets which essentially does all the hard work for us. The final Javascript file is our own scripts file where we’ll write the final bits of jQuery to get everything working and to add the fancy sliding effect.
The Last.fm records plugin inserts the albums into a div with an ID of lastfmrecords, so this is added to the HTML file in the desired place.

Activating the jQuery plugin

The documentation to activate the Last.fm records plugin can all be found on Jeroen’s website. Basically the plugin is configured with a few simple lines that declare the Last.fm username from which to fetch the information, the number of items to display and what kind of time period to collect the information from. One extra configuration option I’ve added from the main plugin file is an alternative image for any albums that don’t have cover art.

Previewing the HTML file so far will show the jQuery plugin doing its job and displaying the relevant album art neatly linked to the artist’s Last.fm profile.

Styling with CSS

The HTML was super simple, and the CSS isn’t too complicated either. After setting up the overall styling for the demo background and heading, the main CSS for the actual album art is just to space out each <li> element with 30px margin and to add the shadow graphic as a background-image. Adding position:relative; will allow the child elements of this list item to be positioned absolutely later.

A preview of the file with all the CSS in place will show a fully working copy of the initial concept with all the albums filling the page.

Creating the fancy sliding vinyl record

We need another HTML object to attach the vinyl record to with CSS, so jQuery is used to append an empty span element inside each anchor. Then a hover function is added to create the effects when the user’s mouse hovers and leaves the links. The jQuery finds the child span of that particular link then animates the positioning to 95px at a speed of 500ms. On hover-out the positioning is returned to 38px, which sits the record exactly over the album cover. The addition of .stop(true,true) is a handy snippet to prevent any strange behaviour if a link is quickly passed with the mouse triggering a repeating effect.

A touch more CSS styles up the newly created span into a vinyl record graphic using image replacement. The absolute positioning allows the record to sit exactly in place over the album art, then z-index adjusts the stacking order of the objects so the vinyl sits below the album art and is essentially hidden until it slides out from beneath it.

Complete CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #606060 url(images/bg.jpg) repeat-y;	
}

h1 {
	font: italic 60px Georgia, Serif; color: #333; text-shadow: 0px 3px 1px #606060;
	margin: 30px 0 50px 0; text-align: center;
}

#lastfmrecords {
	width: 700px; margin: 0 auto;
}

#lastfmrecords li {
	width: 200px; float: left; position: relative; text-align: center;
	margin: 0 30px 30px 0; padding: 0 0 7px 0; 
	background: url(images/shadow.png) bottom no-repeat;
}

	#lastfmrecords li a img {
		position: relative; z-index: 10;
	}
	#lastfmrecords li a span {
		display: block; width: 125px; height: 125px;
		background: url(images/vinyl.png);
		position: absolute; top: 0; left: 38px; z-index: 5;
	}		

Complete Javascript

$(document).ready(function() {
      var _config = {
        username: 'spoongraphics',
        count: 9,
        period: 'topalbums',
        defaultthumb: 'http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_large.png'
    };
   lastFmRecords.init(_config);
   
   $("#lastfmrecords a").append("");  
   
   $("#lastfmrecords a").hover(
      function () {
        $(this).children("span").stop(true,true).animate({"left": "95px"}, 500);
      }, 
      function () {	
        $(this).children("span").animate({"left": "38px"}, 500);
      }
    );
});

View the demo

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

32 Comments

  1. ABDUL JANOO says:

    awesome work
    working on script+graphic is really great………… really good work I always waiting for ur daily updates on ur both blogs.

  2. Cameron D says:

    Nice tutorial, as usual! I'll be bookmarking this for future reference! Thanks a lot Chris

  3. Logesh kumar says:

    Thanks , Great tutorial !

  4. piyansitll says:

    very good tutorial thanks a lot

  5. dompl says:

    Really good stuff. Thank you for this!

  6. Dave Fowler says:

    Nice tut.. now if someone would just build a wordpress plugin.. hmmm

  7. Wacha says:

    chris, this is Awesome!!!
    Like Flower says…a wp plugin would add a great deal to wordpress bloggers.

    any way to modify the jquery so that a popup can load a player window…

  8. Tayana says:

    Awesome! I've been trying to do this for a month or something now! Thanks!

  9. Wacha says:

    Oh 'fowler', sorry bout the typo…

  10. Hi Chris, thanks for using my code for such a great new implementation!

    For anyone wondering: this code is part of my WordPress plugin to show cd covers, you can find it at

    http://wordpress.org/extend/plugins/lastfm-records/

  11. Satishkumar says:

    Nice article. Keep posting ur creative ideas and stuff.

  12. vijay says:

    another simple and nice idea, I'll sure use this in my website :-)

  13. Thanks for the comment so far everyone. Don't forget to show Jeroen your support too, as mentioned in the post he's basically the brains behind it all thanks to his plugin.
    As Jeroen also mentioned above for those wanting a WordPress version, his plugin is also available for WP – http://wordpress.org/extend/plugins/lastfm-records/

  14. Beben Koben says:

    hihihi, this is like giving to us a libraries songs…
    hohohoho thanks for the tutorial

  15. Nathaline says:

    wow! this is great!
    thanks for sharing chris :)

  16. Ravi Juneja says:

    very nice ….. like it …. :)

  17. Vit says:

    Thanks! Wonderful tut!

  18. Buzz says:

    Awesome, this is a great idea, can't wait to try and use it somewhere… thanks for sharing

  19. Lee Gustin says:

    Awesome Chris (and Jeroen)! Bookmarked for sure :)

  20. Idraki says:

    i don't know what happen but i don't see any album cover, only a broken image link and the disc moving. maybe the image link is broken

  21. Tibi Dress says:

    This page is a walk-through for all the info you wanted about this and didn't know who to ask. Look here, you'll absolutely get your answers.

  22. SEO says:

    this was a really quality article. In theory I’d like to write like this also – taking time and real effort to make a interesting article… but what can I say… I procrastinate a lot and never seem to get it done

  23. Sean says:

    This is just great!

  24. Adie says:

    Hey Chris,

    Nice tutorial. I'm wondering if the effect could be achieved using CSS3 and use the jQuery as a fallback for non CSS3 transition browsers. Thinking about giving it a go.

  25. Monica says:

    What a great tutorial to watch!
    Personal profile page is really important too to catch up more viewers. First impression is hugely important! you might want to visit us …

  26. Markus says:

    like your music ;)

  27. Blake says:

    Great tutorial! What are you using to put the hand-written looking comments and arrows in your posts?

    Thanks!

  28. Great tutorial and thanks for sharing the code as well .. I know I will use this tool soon … Great job — Kathleen :)

  29. I like the look. Nice texture in the background with an overall clean feel. Very nice! Thanks for the tut.

  30. Fuad NAHDI says:

    Hi Chris,

    This is really an awesome tutorial and very useful for me.
    Thanks

Sorry, comments are now closed