jquery.JamCity

v. 2.0.0

Getting Started

First, include the jQuery library, jQuery.JamCity javascript (jQuery.JamCity.js or jQuery.JamCity.min.js) and the jQuery.JamCity CSS (jmc_styles.css) on the page(s) where you want to use jQuery.JamCity.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jQuery.JamCity.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jmc_styles.min.css" type="text/css">

Then, add a container div with an ID to your HTML so we can output jQuery.JamCity somewhere.

<div id="JMC_Container"›‹/div>

Then, initialize jQuery.JamCity. Put the following code before the closing tag of your body ().

<script type="text/javascript">
$(document).ready(function(){
	$("#JMC_Container").JamCity({
		apiKey: '{your_apiKey}',
		username: '{your_username}'
	});
});
</script>

NOTE: Please do not use my API key (c5d7bcc2600127f2c24e5b50c5f8ea5a) on your site. This API key is used only for demo purposes. You can generate your own key for free here http://www.last.fm/api/account! Thank you!

Usage

Configuration Settings
$("#demo1").JamCity({
	apiKey: '',
	username: '',
	fetch: 5,
	contentType: 'recentTracks',
	artSize: 'medium',
	cssTooltips: true,
	cssThemeClass: null,
	_blankLinks: true,
	refreshResults: true,
	refreshResultsInterval: 600000,
	noAlbumArtImg: 'http://placehold.it/250x250&text=No Art',
	noResults: 'Sorry, nothing was found...',
	songsFetched: function () {},
	htmlBuilt: function () {}
});

Required params:

Optional params:

HTML Output
<ul id="jamCityWrapper" class="jamCitySize_{size}">
  <li>
    <a href="{Link}" data-tip="{name}" class="case {nowplaying}" target="_blank">
      <div class="overlay"></div>
      <div class="cover"><img src="{art}"></div>
      <div class="vinyl"></div>
    </a>
  </li>
  <li>
    <a href="{Link}" data-tip="{name}" class="case {nowplaying}" target="_blank">
      <div class="overlay"></div>
      <div class="cover"><img src="{art}"></div>
      <div class="vinyl"></div>
    </a>
  </li>
  <!-- etc... -->
</ul>

Demos

Demo 1 (default settings)
$("#demo1").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro'
});
Demo 2 (small size + fetch 8)
$("#demo2").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	fetch: 8,
	artSize: 'small'
});
Demo 3 (large size + fetch 3 + no refreshing for new results)
$("#demo3").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	artSize: 'large',
	fetch: 3,
	refreshResults: false
});
Demo 4 (topArtists + fetch 4 + htmlBuilt callback)
$("#demo4").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	contentType: 'topArtists',
	fetch: 4,
	htmlBuilt: function () {
		console.log('This is a htmlBuilt callback function!');
	}
});
Demo 5 (weeklyAlbumChart + no _blankLinks + fetch 4)
$("#demo5").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	contentType: 'weeklyAlbumChart',
	_blankLinks: false,
	fetch: 4
});
Demo 6 (topAlbums + fetch 8 + jamCityTheme_whiteVinyl theme)
$("#demo6").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	contentType: 'topAlbums',
	cssThemeClass: 'jamCityTheme_whiteVinyl',
	fetch: 8
});
Demo 7 (topTracks + fetch 2 + refresh results + refresh results every 40 seconds)
$("#demo7").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'bluetidepro',
	contentType: 'topTracks',
	fetch: 2,
	refreshResults: true,
	refreshResultsInterval: 400000
});
Demo 8 (Loved tracks + custom noResults text)
$("#demo8").JamCity({
	apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
	username: 'St4rStruck4VT',
	noResults: 'Sorry homie, ain\'t no loved tracks here!',
	contentType: 'lovedTracks'
});

Changelog

FAQ

More info, and contact

Code inspired from "Last.fm Plugin for jQuery" and "jQuery.nowPlaying"

Contact me (or tweet @bluetidepro) if you have any questions about jQuery.JamCity.

License

The MIT License (MIT)

Copyright (C) 2013 Zach Reed, http://iamzachreed.com/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.