JimdoサイトにjQueryスライドショーを入れる方法を、以前ご紹介したのですが、思った以上に反響があって、大変嬉しく思います。Jimdoフォーラムにも取り上げられているようでして。（ちゃんとチェックしていますよ～）【みんビズ jimdoでインタラクティブなjQueryスライドショーを入れる】これでjimdoサイトもちょっとはかっこよくなるかな

で、今回はもうちょっと柔軟にカスタムできるjQueryスライドショーの設置方法を紹介します。

スライドショーでよく使われる有名な「jQuery Cycle」でやります

「jQuery Cycle」のサイトです。jQuery Cycle Plugin

jQuery Cycleは、スライドショーを作る時にとても便利なライブラリですね。巷のスライドショーではけっこうこのjQuery Cycleのライブラリを使われている例をよくみかけます。まあ、それだけ便利でメジャーなものだと思われてよろしいかと、私は思います。

というわけで説明はこれくらいで、jQuery Cycle Pluginをクリックしますと下のような画面が表示されると思います。

ページを開くとすぐわかるのですが、デモ画面でスライドの動きが見れるんです。これはとてもありがたいですね。

このサイトのデモ画面のようなスライドを入れることができます。ホントに簡単でクオリティが高いjQueryスライドが入れられる時代になりましたかね・・・開発された方に感謝しつつ、ありがたく使わせていただきます・・・ですね。

さっそくファイルのダウンロードをしますよ

では、ダウンロードを。ページ左上の「Download the Cycle Plugin」をクリックしましょう。今回は、よりシンプルを目指しますので、簡易バージョンの「Cycle Lite」をダウンロードします。リンクの上で右クリックを押してファイルを保存しましょう。（※Cycle Liteで感触をつかめたのであれば、後々フルバージョンのご利用も検討されるとよいかもです。）

ダウンロードしたファイルは後で使います。では、次はいよいよJimdoに設置します。

Jimdoの「ヘッダー」にjQueryのコードを書きます

Jimdoの管理画面に移動してください。画面右側の「設定」をクリック。「ヘッダー部分を編集」を押しましょう。

下の画面に切り替わります。何もヘッダーに書いていなければ白紙だと思います。ここにjQueryのコードを書きます。

１．まずは、googleのjsapiを使うために以下のコードを書きましょう。

コピー＆貼り付けでも大丈夫ですよ。意味不明でも今は大丈夫ですから。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
    google.load("jquery","1.6.2");
//]]>
</script>

２．次は、先ほどのダウンロードしたファイルを使う番ですよ。

一番難しいのはここでしょうかね。

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) { 
  $(function() {
ここに先ほどダウンロードした「Cycle Lite」の内容を「そのまま」貼り付けます
  });
})(jQuery);
//]]>
</script>

３．最後に、下の記述をします。

これもコピー＆貼り付けで大丈夫ですよ。

jQuery Cycleを動かすために必要なんです、単純にいいますと。

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) { 
  $(function() {
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
});
  });
})(jQuery);
//]]>
</script>

以上をヘッダーに書きます。とても丁寧に書いたつもりなのですが、これでも、大丈夫なのかな？と不安だと思います。というわけで、ご参考程度に・・・こんな感じで書きましょう。

ここまでできれば、あともうちょっとですよ。

Jimdoの「文章」ボックスを追加して、コードを書きます

Jimdoで最も柔軟で使いやすいのは「文章」だと私は思うので、Jimdoの特徴の「＋」を押して、「文章」ボックスを作ります。それで、下の画像のように「HTML」をクリックします。入力エリアがでますので、コードを書きましょう。

コードは以下のように書きます。a,imgタグの説明まではちょっとここでは割愛しますね。書いたら保存をしましょう。

<div class="slideshow">
 <a href="./test1.html"><img src="image01.jpg" alt="" width="200" height="200" /></a>
 <a href="./test2.html"><img src="image02.jpg" alt="" width="200" height="200" /></a>
 <a href="./test3.html"><img src="image03.jpg" alt="" width="200" height="200" /></a>
 <a href="./test4.html"><img src="image04.jpg" alt="" width="200" height="200" /></a>
 <a href="./test5.html"><img src="image05.jpg" alt="" width="200" height="200" /></a>
</div>

画像はあらかじめアップロードしておきましょう

肝心なスライドに使う画像はどこで設定するのか。Jimdoに画像をアップロードして、その画像をスライドに読み込む必要があります。で、画像のアップロードは、

• Jimdoの管理画面から「レイアウト」をクリックして、
• 「独自レイアウト」をクリックして
• 「ファイル」をクリック。

ここでできます。アップするファイルは「image01.jpg～image05.jpg」の5つの画像をアップしておいてください。今回は、ファイルをアップする場所のみご紹介です。

以上で設置はできます。できない場合はもう一度手順を見直しましょう。設置が成功すると、http://jquery.malsup.com/cycle/basic.html

のように、フェードイン・フェードアウトで画像が切り替わります。

まとめ

前回ご紹介した、【みんビズ jimdoでインタラクティブなjQueryスライドショーを入れる】これでjimdoサイトもちょっとはかっこよくなるかなとはまた別パターンでJimdoにjQueryスライドショーをいれることができます。そして、今回紹介した「jQuery Cycle」をベースとして、もっと複雑な動きをさせることもできます。要するに、ある程度柔軟なお好みのスライドショーを作ることができると思います。

どんなスライドショーを入れるのかというのはみなさん趣向が違うと思いますので、

• とりあえずフェードイン,フェードアウトができればいい
• 画像にリンクを維持させたままスライドショーを設置した

といった方には今回の方法だけで設置できるので、けっこう簡単な方法だと思います。それに、後からもうちょっとスライド変えたいんだよね～、なんて思われたときでもカスタマイズの余地はありますし。ぜひとも、ご参考いただければ幸いです。

追記：Jimdoサイトリニューアルしました

ｊQuery Cycleを使って私のJimdoページをリニューアルしました。

これからJimdoの話題は私のJimdoページをメインに発信いたします。