recent.lastfm.MooTools v1.3



Details

Author
Adrian Statescu
Current version
v1.3
GitHub
thinkphp/recent.lastfm.MooTools
Downloads
6766
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.6.0: *
  • Handlebars/1.0.0: *

How to use

Include the latest version MooTools Framework, then .js into the page:


Example

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>       
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script src="js/last.fm.js"></script>


window.addEvent('domready', function() {

              new Lastfm({        

                  template: document.id('tracks-template').get('html'),

                  container: $$('.container'),

                  username: 'thinkphp',

                  count: 10,

                  apikey: '<your API Key Here>'

              })
});


#HTML

<h1 id="recent-header"></h1>
<div class="container">
        <img class="loading" src="img/preloader.gif" alt="Loading" title="Loading">
</div>

<script id="tracks-template" type="text/x-handlebars-template">
        {{#each this}}
            <div class="lastfm cf">
                <div class="cover">
                    <a href="{{link}}" title="{{song}}">
                        <img src="images/vinyl.png" class="highlight">
                    </a>
                    {{#if image}}
                    <img alt="{{album}}" src="{{image}}">
                    {{else}}
                    <img alt="{{album}}" src="images/noartwork.png">
                    {{/if}}
                </div>
                <div class="info">
                    <p class="song">{{song}}</p>
                    <p class="artist">{{artist}}</p>
                    <p class="album">{{album}}</p>
                    <p class="album">{{time}}</p>
                </div>
            </div>
        {{/each}}
</script>

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus