jQuery.JamCity (1.1) Documentation by Zach Reed

jQuery.JamCity : v. 1.1

https://github.com/bluetidepro/jQuery.JamCity

Copyright © 2012 Zach Reed (Blue Tide Productions, LLC).

Dual licensed under the MIT and GPL licenses.

Table of contents

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!

Download

Download jQuery.JamCity (1.1) →

Fork jQuery.JamCity (1.1) on GitHub →

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.js" type="text/javascript"›‹/script›
  ‹link rel="stylesheet" href="css/jmc_styles.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" charset="utf-8"›
    $(document).ready(function(){
       $("#JMC_Container").JamCity({
         apiKey: '',
         username: 'bluetidepro'
       });
    });
  ‹/script›

Usage

  $("#demo1").JamCity({
      apiKey: '',
      username: '',
      contentType: '',
      artSize: '',
      artQuality: 'normal'
      number: 5,
      refreshResults: true,
      refreshResultsInt: 45000,
      tooltips: true,
      nowPlayingIcon: true,
      _blankLinks: true,
      noAlbumArtImg:'http://placehold.it/126x126&text=No Art',
      cssWrapperID: 'jmc_wrap',
      cssThemeClass: 'jmc_dark_theme',
      noLovedTracks: 'Sorry, No loved tracks...',
      noTopAlbums: 'Sorry, No top albums...',
      noTopTracks: 'Sorry, No top tracks...',
      noNewReleases: 'Sorry, No new releases...',
      noRecentTracks: 'Sorry, No recent tracks...',
      onComplete: function () {
      }
  });

Configuration Settings

Each Item HTML Output

  ‹li class="jmc_track"›
    ‹a href="{Track Link}" title="{name} by {artist}" target="_blank"›
      ‹span class="jmc_album_art"›‹img src="{album art}" alt="{name} by {artist}">›‹/span›
      ‹span class="jmc_vinyl_case"›‹/span›
      ‹span class="jmc_vinyl_slip"›‹/span›
      ‹span class="jmc_vinyl"›‹/span›
      ‹div class="jmc_tooltip_wrap"›{name} by {artist}‹span class="jmc_tooltip_arrow_down"›‹/span›‹/div›
    ‹/a›
  ‹/li›

Demos

Demo 1 (default settings)

  $("#demo1").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro'
  });

Demo 2 (small size + 12)

  $("#demo2").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    artSize: 'sm',
    number: 12
  });

Demo 3 (large size + extreme quality + 4 + no refreshing for new results)

  $("#demo3").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    artQuality: 'extreme',
    number: 4,
    refreshResults: false,
    artSize: 'lg'
  });

Demo 4 (Top albums + high quality + 7)

  $("#demo4").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    contentType: 'topAlbums',
    artQuality: 'high',
    number: 7
  });

Demo 5 (Top tracks + high quality + 7)

  $("#demo5").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    contentType: 'topTracks',
    artQuality: 'high',
    number: 7
  });

Demo 6 (New Releases + 7)

  $("#demo6").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    contentType: 'newReleases',
    number: 7
  });

Demo 7 (large size + light theme + 4)

  $("#demo7").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    cssThemeClass: 'jmc_light_theme',
    number: 4,
    artSize: 'lg'
  });

Demo 8 (Loved tracks + custom help text + no refreshing for new results)

  $("#demo8").JamCity({
    apiKey: 'c5d7bcc2600127f2c24e5b50c5f8ea5a',
    username: 'bluetidepro',
    contentType: 'lovedTracks',
    refreshResults: false,
    noLovedTracks: 'Sorry homie, ain\'t no loved tracks here!'
  });

Changelog

FAQ

More info, and contact

Portions of the code derived/forked from "Last.fm Plugin for jQuery" and "jQuery.nowPlaying"

Original .PSD for some design elements by Tobias Wiedenmann - Music Album Cover PSD

jQuery.JamCity has hoverIntent r6 (2011.02.26) built-in for tooltips to work properly.

Email me (Twitter: @bluetidepro) if you have any questions about jQuery.JamCity.