自動スライドショーが表示されない

サイトのTOPページに下記の自動スライドショーを設置したいと考えています。

モーションアニメ付きスライドショー

設置方法等を拝読し、試行錯誤を重ねましたが上手く表示されません。

現在の環境は
サーバ：Xserver
使用テーマ：photo clip
使用しているブラウザ：FireFox3.6.8, IE8
です。

——————————————————————————————————————————————

行った手順
①必要なファイルをDL

②解凍後jsフォルダ内のmootools.js, slideshow.js, slideshow.kenburns.jsを
テーマディレクトリ/scripts/js/にコピー

③imagesフォルダ内のslideshow.cssをテーマディレクトリ/scripts/js/css/にコピー

④テーマディレクトリ/scripts/js/images/の下に画像を4枚配置(ファイル名は1～4.jpg)

⑤スクリプトの読み込みコードをテーマの(header.php)内の<?php wp_head(); ?>のすぐ上に記述

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/scripts/js/css/slideshow.css" media="screen" />
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/mootools.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/slideshow.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/slideshow.kenburns.js"></script>

⑥上記に続き設定コードを記述

<script type="text/javascript">
      //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
          '1.jpg': { caption: 'caption1' },
          '2.jpg': { caption: 'caption2' },
          '3.jpg': { caption: 'caption3' },
          '4.jpg': { caption: 'caption4' }
        };
        var myShow = new Slideshow.KenBurns('show', data, { captions: true, delay: 5000, duration: 2000, height: 400, hu: '<?php bloginfo('template_url') ?>/scripts/js/images/', width: 666 });
        });
    //]]>
	</script>

⑦設置コードをテーマの(index.php)内の<?php if (have_posts()) : ?>のすぐ上に記述

<div id="show" class="slideshow"></div>

——————————————————————————————————————————————

参考サイトのセッティング通りに導入したつもりなのですが画像が表示されません。
slideshow.css内で指定したheightやwidthは反映されています。

コードの記述場所やパスの指定方法の変更などはしてみましたが解決できずに困っています。

どうぞよろしくお願いいたします。