ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

Skitterで迫力ある効果のスライドショーを作る方法(3ページ目)

ダイナミックな効果で画像を次々に切り替えていく、とても目を引くスライドショーを作ってみましょう。jQueryで作られた「Skitter」スクリプトを使えば、カッコいい迫力ある効果を伴ったスライドショーが簡単に作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Skitterを使ってスライドショーを作る方法

Skitterの構成ファイルをアップロードできたら、実際にウェブページ上でSkitterを使ってみましょう。以下の手順でソースを記述して下さい。

  1. HTMLのhead要素内に、必要なファイルを読み込む記述を加える
  2. スライドショーとして表示する画像を、リストの形式で記述する
  3. Skitterスクリプトを実行するJavaScriptを記述する

どれも、ほんの数行を記述するだけの簡単なものです。

HTMLのhead要素内に、必要なファイルを読み込む記述を加える

HTMLソースのhead要素内に、以下の4行を記述します。
<link href="./skitter/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="./skitter/js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="./skitter/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./skitter/js/jquery.skitter.min.js" type="text/javascript"></script>
ここでは、Skitterを構成するファイルの一式を、「skitter」サブディレクトリに格納している場合を例にしています。実際にアップロードした場所に合わせて修正して下さい。

スライドショーとして表示する画像を、リストの形式で記述する

スライドショーとして表示する画像群は、ul要素とli要素を使った「リスト」の形式で、body要素内に記述します。その際、リスト全体を囲むdiv要素を1つ作り、適当なclass名(またはid名)を付加します。下記では、「box_skitter」というclass名を記述しています。
<div class="box_skitter">
   <ul>
      <li><a href="/"><img src="river.jpg" class="cube" /></a><div class="label_text"><p></p></div></li>
      <li><a href="/"><img src="fall.jpg" class="cubeRandom" /></a><div class="label_text"><p></p></div></li>
      <li><a href="/"><img src="cherry.jpg" class="block" /></a><div class="label_text"><p></p></div></li>
      <li><a href="/"><img src="sakuramochi.jpg" class="cubeStop" /></a><div class="label_text"><p>桜餅</p></div></li>   
   </ul>
</div>
上記では、「river.jpg」、「fall.jpg」、「cherry.jpg」、「sakuramochi.jpg」の4枚の画像をリストの形式で記述しています。スライドショーとして表示したい画像の数だけ列挙して下さい。なお、リンクを作るa要素は、書かなくても構いません。また、画像の直後に記述しているdiv要素(「label_text」というclass名付き)の中には「ラベル」(写真のタイトルなど)を記述できます。

スライドショーの画像切替効果は、画像ごとに指定できる
効果の名称をclass属性値に指定するだけ

効果の名称をclass属性値に指定するだけ

このリスト内で、画像を表示するimg要素にclass属性を付加することで、「その画像を表示する際に、どのような表示効果を使うか」を指定できます。上記のソースの場合は、
  • 川(river.jpg)を表示する際には「cube」効果を、
  • 滝(fall.jpg)を表示する際には「cubeRandom」効果を、
  • 桜(cherry.jpg)を表示する際には「block」効果を、
  • 桜餅(sakuramochi.jpg)を表示する際には「cubeStop」効果を、
それぞれ指定しています。

どの効果がどのような名称なのかは公式サイトのサンプルで把握できる
その画像が表示される際に使われた効果名がラベルとして表示されている

その画像が表示される際に使われた効果名がラベルとして表示される

38種類ある効果がどのようなもので、それが何という名称を指定すれば利用できるのかは、公式サイトのトップページ(右図)を見ればすぐに分かります。

公式サイトのサンプルでは、右図の赤丸部分のように、各写真のラベルとして、「その画像が表示される際に、どのような画像切替効果が使われたのか」が表示されます。その表示を参考に、何を指定するかを選ぶと良いでしょう。

指定できる名称は、「cube」、「cubeRandom」、「block」、「cubeStop」、「cubeHide」、「cubeSize」、「horizontal」、「showBars」、「showBarsRandom」、「tube」、「fade」、「fadeFour」、「paralell」、「blind」、「blindHeight」、「blindWidth」、「directionTop」、「directionBottom」、「directionRight」、「directionLeft」、「cubeStopRandom」、「cubeSpread」、「cubeJelly」、「glassCube」、「glassBlock」、「circles」、「circlesInside」、「circlesRotate」、「cubeShow」、「upBars」、「downBars」、「hideBars」、「swapBars」、「swapBarsBack」、「swapBlocks」、「cut」、「random」、「randomSmart」の38種類です。

Skitterスクリプトを実行するJavaScriptを記述する

最後に、Skitterスクリプトを実行するよう以下のソースを(body要素の末尾などに)記述します。下記の「.box_skitter」の部分には、スライドショーとして表示するリストを囲んだdiv要素に付加したclass名を指定して下さい。もし、class名ではなくid名を付けた場合は、「.」記号の代わりに「#」記号を使って、「#box_skitter」のように記述します。
<script type="text/javascript">
   $(document).ready(function() {
      $('.box_skitter').css({width: 640, height: 300}).skitter({
         theme: 'square',
         numbers_align: 'center',
         progressbar: true, 
         dots: true, 
         preview: true,
         stop_over: false
      });
   });
</script>
ここでは、各種オプションも同時に記述できます。オプションについて、詳しくは次のページでご紹介致します。とりあえず、上記のソース(=縦横の表示サイズと6個のオプションを指定済み)をそのままコピー&ペーストして使ってみて下さい。

Skitterを使って迫力あるスライドショーを作ってみた例

Skitterを使ったサンプルページ

Skitterを使ったサンプルページ

上記のソースを記述して、迫力のあるスライドショーを作ってみた例は、右図の通りです。実際にブラウザで表示を確認してみるには、以下のサンプルページにアクセスして下さい。

迫力のあるスライドショー「Skitter」のサンプルページ


 
さて、Skitterには、様々なオプションが用意されています。スライドショーの表示方法や、スライドショーの制御などに関する様々な設定ができます。最後に、オプションの効果と指定方法をご紹介致します
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます