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
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
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).
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.
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.
- 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.
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!
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!
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).
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
JQuery & Joomla