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ページをメインに発信いたします。
このページを共有する