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 :)
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
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 ...
(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
Have a look on the drop down for mod_lastfm_funky_latest and select it :)
This will open up our module so we can edit it ... you should now see the following ...
Do as it says and Click to Edit This Module :)
Obviously there are the normal parameters to set ...
Change the Title if you want to ...
Enable the module
Decide where you want the module positioned
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
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
Fiddle around with different versions of the JQuery library - stick to the latest version if you can :)
Delete Other Loaded 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
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
Sometimes turning off Mootools completely will make jquery scripts run - give it a try ... nothing ventured, nothing gained!
Turn Off 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
Choose whether to show the last.fm logo and which colour logo to show.
Text Before Grid
Do you want to put something before your nice grid of album artwork? :) You can put HTML here if you like.
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
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
Nuff said.
Number of Columns To Display
Some of these are obvious :)
Show if track is being played now
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 ....
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
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
Get yourself a last.fm api key and put it here
Text To use for link to Last.FM profile
Put the text you want for the link to your last.fm page
Movement
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
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 ...
... did that help? I'm not sure :( Best bet is to tinker and see what effect you prefer!
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
You guessed it !
Album Artwork Fade In
Can you see where this is going?
Album Artwork 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 ...
and hope that it all 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
Read XML feeds using PHP 5 and SimpleXML
JQuery & Joomla
More on using jQuery with Joomla
