Search i-r-paulus

Close Panel

    Archived tutorialsDon't forget - these are archived tutorials - the instructions below will relate to Joomla! 1.5 and/or Joomla! 1.6.

    Updated versions will eventually be available in the 'Tutorials' section.

    Nov 03 2010

    Installing & Using My last.fm Latest Plays Module

    At present this module just works for Joomla 1.5 - it was never really that popular anyway (though I was pretty proud of it and thought it rather splendid in its own pointless way) - anyway, I will be upgrading it in the near future - so contact me if you would like to know when the updated version is available :)

    I've always liked to listen to music while I work, so I have a nice module I downloaded from the JED to let people know what I'm listening to, unfortunately it is not really supported any more and it also does about 1000 things I don't really need.

    I also keep putting off learning a little bit about jquery as I've found that putting updated mootools scripts on a Joomla! website a bit of a problem ... roll on 1.6 :)

    Another thing I have been meaning to make some effort to learn is using SimpleXML to grab information from some of my favourite API's ...

    ... so I decided to integrate the 3 ... I've made a last.fm module that uses jquery and SimpleXML (as well as cURL - which I learnt about making my Skype Module) to display the artwork from the latest tracks I've listened to ...

    ... its eyecatching (I think) and fairly useless, but its provided me with a couple of weeks of tinkering and learning and now its time for everybody else to have a play :)

    What the final result looks like

    If everything goes to plan, your module should look a little like the one above - but with hopefully a slightly less neurotic choice of music :)

    The jquery I've written is based very heavily on a tutorial on www.queness.com a site that I found really, really helpful while coming to terms with jquery.

     (For the download - I have changed the 'No Artwork For This Track' image to one which does not have my logo in it, if you want to customise the image for your site, you will find the image here   ../modules/mod_lastfm_funky_latest/images/no-artwork.png)

    To start - get yourself over to my downloads page and download the module - save the zip file mod_lastfm_funky_latest.zip somewhere nice and memorable on your hard drive :)

    Now navigate your way over to the administrators section of your website and click on the Extensions link then Install/Uninstall

    Upload that zip file

    Find that zip file you downloaded earlier and upload it (The zip file is fairly big because I have built in a jQuery/Mootools Anti-Clash script - which means including about 12 jquery javascript files - more about this later!)

    If everything works out you should see something like the screen below ...

    Woohoo Paul zipped the file right ... eventually

    (Screenshots are from my previous website www.givemeajobsoicanmovetocanada.co.uk and the images in the module are from that site)

     Now it time to tinker ... click Extensions then Module Manager

    Go to Module Manager

    Have a look on the drop down for mod_lastfm_funky_latest and select it :)

    Select mod_lastfm_funky_latest

    This will open up our module so we can edit it ... you should now see the following ...

    Edit My Module :)

    Do as it says and Click to Edit This Module :)

    Obviously there are the normal parameters to set ...

    Change the title

    Change the Title if you want to ...

    Enable the module!

    Enable the module

    Choose Module Position

    Decide where you want the module positioned

    Choose page(s) to display the module on

    Decide which pages to display the module on :)

    Parameters For The Module

    Jquery & Mootools Settings

    When I was building this module (and having installed some modules before that used jquery) it became obvious that as Joomla! uses Mootools as standard, there can sometimes be a few problems with compatibility (ahem) between the 2 javascript libraries.

    There are several great plugins out there that try to alleviate the incompatibility problems and I've used most, if not all of them :) Anyways, it occurred to me that a plugin has a site wide effect and sometimes you can forget which library you want to have priority, or you have several jquery scripts on a single page ... or in fact a miriade of combinations ... whereas a module can be set to only affect a single page, so I set out to give users as many choices as possible when they use a module with jquery ...

    (This piece of the module I will be packaging up as a seperate module that can be installed and used just to help out with jquery/mootools conflicts) ... watch this space ... well actually don't nothing will happen here, have a look in the downloads section!

     ... As I was saying - the module allows you to set several parameters ...

    Include JQuery Library 

    Load JQuery Library

    Decide whether to load JQuery library here - try turning library off if you have a lot of modules loaded that use JQuery and this module refuses to work.

    Which Version of JQuery To Load 

    Which JQuery Library?

    Fiddle around with different versions of the JQuery library - stick to the latest version if you can :)

    Delete Other Loaded JQuery Libraries

    Delete Other JQuery libraries

    If other modules have loaded jquery files already, you might want to delete these from the <head> before the page is rendered (make sure you load at least one library or this module won't work).

     Include JQuery No Conflict Script 

    No Conflict Mode JQuery

    You can tell jquery to run in no conflict mode if its being used with another javascript library more details here

    This module doesn't use the $ prefix, but some of the other modules you are using might, so if you are experiencing problems, try turning this on.

    Turn Off Mootools

    Turn Off Mootools

    Sometimes turning off Mootools completely will make jquery scripts run - give it a try ... nothing ventured, nothing gained!

    Turn Off Captions

    Turn of Mootools Captions

    I've never come across this problem myself, but a lot of the stuff written about these conflicts suggests it can be a problem ... so turn it off here :)

    Main Module Settings

    Module Class Suffix - the standard way of styling modules

    Show Last.fm Logo

    Last.FM Logo

    Choose whether to show the last.fm logo and which colour logo to show.

    Text Before Grid

    Intro Text

    Do you want to put something before your nice grid of album artwork?  :) You can put HTML here if you like.

    Last.fm Username

    last.fm username

    Replace my last.fm username with your own, or leave mine there if you are a little bit weird, but if you are a little bit weird, please don't contact me, it's the hospital you need.

    Number of Recent Tracks To Return

    How mant recent tracks to show

    After putting this in, I sort of realised that taking the number of rows and columns into consideration would make this value fairly redundant ... but I suppose it means you have to spend some time thinking about the way your artwork grid will appear, so its staying for the time being :)

    Number of Rows To Display

    Number of Rows

    Nuff said.

    Number of Columns To Display

    Number Of Columns

    Some of these are obvious :)

    Show if track is being played now

    Now Playing

    Last.fm xml returned, can let you know if you are actually playing a track when the request to last.fm is made - you can decide whether you want this to show on your website ... it looks like this ....

    Now Playing Flashy Bit

    The little panel pulses (uses the jquery plugin 'pulse' by James Padolsey) - you can change the way it looks by editing the css file here : ../modules/mod_lastfm_funky_latest/css/ lfm_latest.css

     Text To Display if 'Track Playing' Selected

    Text to show if Playing Now is selected

    Again, a pretty obvious one :)  - I did try this with an image, but IE gave me some grief, so I ditched the idea, might put it in the next version if I can work around the problem.

    Last.fm Api Key

    Last.fm api Key

    Get yourself a last.fm api key and put it here

    Text To use for link to Last.FM profile

    Text to Display for link to last.fm

    Put the text you want for the link to your last.fm page

     Movement

     Artwork Shift

    This is a fairly simple animation, as the artwork is zoomed (see next parameter) this moves the zoomed image (to make it a bit more dynamic). So the value of -233 above means the top of the image moves -233 pixels and the left moves -233 pixels (while zooming) ... have a look at the image 2 below :)

    I thought about adding some more parameters here for extra funkiness, but then I remembered I had to do grocery shopping, so maybe in the next version!

    Zoom Amount

    Zoom Amount

    How much the artwork zooms on mouseover - this is a 'try it and see' type of parameter.

    Here is an attempt at illustrating what happens when you use the 2 parameters above ...

    zooming and moving the artwork

    ... did that help? I'm not sure :( Best bet is to tinker and see what effect you prefer!

    Caption Fade In

    Caption Fade In

    How quickly the link to last.fm fades in on mouseover

    I've tested the module in most of the main browsers (I think IE7 was the only one that didn't render properly - not sure why).

    Caption Fade Out

    Caption Fade Out

    You guessed it !

    Album Artwork Fade In

    Artwork fade in

    Can you see where this is going?

    Album Artwork Fade Out

    Fade Out

    Yes, you guessed right! - like most modules that use jquery, fiddling with the settings will be the best way to find what suits you :)

    Now you are all done, save the changes ...

    Save It

    and hope that it all works :)

     Woohoo! It works

    Sources:

    I got 'a lot' of help building this module, here are a few of the sites that I used to help me out ....

    XML & Last.FM & Joomla

    Last.fm Album Art With SimpleXML And An API Key

    CodeIgniter Forum

    Reading XML with PHP

    Read XML feeds using PHP 5 and SimpleXML

    JQuery & Joomla

    More on using jQuery with Joomla

     

    Published in Joomla!
    Written by  i-r-paulus
    Rate this item
    (0 votes)
    Read 2166 times Last modified on Sunday, 03 June 2012 13:05

    Social Network

    Related items