[Inxie]

Hello, someone has kindly written up a jquery script that will change my radio buttons to images, he even showed me a demo of it working via http://jsfiddle.net/elclanrs/BQp2F/.
The problem is, I cant get it to work, and if you open that demo, place my source code in the HTML window and press RUN it doesn't work either.

Here's my page with radio buttons: http://www.pazzle.co.uk/index.php?ma...&products_id=3

Here is what he has given me:

A sprite to save and upload:
http://i.imgur.com/KSNpJ.png

jQuery:

;(function(){
$.fn.customRadioCheck = function() {

  return this.each(function() {

    var $this = $(this);
    var $span = $('<span/>');

    $span.addClass('custom-'+ ($this.is(':checkbox') ? 'check' : 'radio'));
    $this.is(':checked') && $span.addClass('checked'); // init
    $span.insertAfter($this);

    $this.parent('label').addClass('custom-label')
      .attr('onclick', ''); // Fix clicking label in iOS
    // hide by shifting left
    $this.css({ position: 'absolute', left: '-9999px' });

    // Events
    $this.on({
      change: function() {
        if ($this.is(':radio')) {
          $this.parent().siblings('label')
            .find('.custom-radio').removeClass('checked');
        }
        $span.toggleClass('checked', $this.is(':checked'));
      },
      focus: function() { $span.addClass('focus'); },
      blur: function() { $span.removeClass('focus'); }
    });
  });
};
}());

CSS:

.custom-label {
  display: inline-block;
  margin-right: .8em;
  cursor: pointer;
}
.custom-radio,
.custom-check {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -.15em; /* Adjust to for best fit */
    margin: 0 .4em;
    width: 20px;
    height: 20px;
    background: url(customRadioCheck.png) 0 0 no-repeat;
}
.custom-radio { background-position: 0 -20px; }
.custom-check.focus { background-position: -20px 0; }
.custom-radio.focus { background-position: -20px -20px; }
.custom-check.checked { background-position: -40px 0; }
.custom-radio.checked { background-position: -40px -20px; }
.custom-check.checked.focus { background-position: -60px 0; }
.custom-radio.checked.focus { background-position: -60px -20px; }

NOTE: I have saved and uploaded these as jscript_customradio.js and style_customradio.css and as expected it does not work. Here is my screenshot to show it's all loaded with no errors: http://i50.tinypic.com/o0qdde.jpg