[jQuery]クロスフェードで切り替わる画像（URL）を簡単実装「Innerfade with jquery」！

コンテンツ

ブログ記事

[jQuery]クロスフェードで切り替わる画像（URL）を簡単実装「Innerfade with jquery」！

------------------

簡単に画像や文字（要素）をクロスフェードで切り替える事が可能なjQueryのプラグイン「Innerfade with jquery」のご紹介です。

FLASH等でよく見かけますが、やっぱりクロスフェード（フェードイン・フェードアウトの交差）は綺麗ですね！
画像の切り替わりと同時にその画像に設定したURLに変更するので、おしゃれなバナー広告として、又、最近の記事一覧（ニュースティッカーとして画像を切り替え）の紹介などに使えそう。
又、HTMLの構造がリスト構造になっているので、画像の追加や、後々のメンテナンスも簡単なのも嬉しいですね。Great！

下の画像はスタイルシートを外したブラウザの画面。。。うんうん、リストですな。

以下、「Innerfade with jquery」の実装手順です。
1.「Innerfade with jquery」からjquery.innerfade.zipをダウンロードします。（ページの一番下にあります。）そしてファイルを解凍展開。

2.jsフォルダの「jquery.innerfade.js」「jquery.js」ファイルを任意の場所（jsフォルダ等）にコピー保存します。

3.HTMLファイルにjsファイルの読み込み部分のソースを記述します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>

4.表示したい画像とURLのHTMLをリスト形式で記述します。

<ul id="portfolio">
  <li>
     <a href="http://miracle-ysdesign.com/blog/webdesignconnection/103.html"><img src="images/lavalamp.jpg" alt="Lava Lamp Menu でロールオーバー表現を豊かにする" /></a>
  </li>
  <li>
     <a href="http://miracle-ysdesign.com/blog/wordpress/118.html"><img src="images/lightbox2.jpg" alt="Lightbox 2プラグイン導入！" /></a>
  </li>
  <li>
     <a href="http://miracle-ysdesign.com/blog/javascript/75.html"><img src="images/multicol1.jpg" alt="HTMLで雑誌のような美しい段組みレイアウトを実現するjQueryプラグイン！" /></a>
  </li>
  <li>
     <a href="http://miracle-ysdesign.com/blog/javascript/140.html"><img src="images/tablesorter.jpg" alt="tablesorterを使ってテーブルのソートを可能にする" /></a>
  </li>
</ul>

5.jQueryのソースを記述します。

<script type="text/javascript">
  $(document).ready(
    function(){
       $('ul#portfolio').innerfade({
          speed: 1000,
          timeout: 5000,
          type: 'sequence',
          containerheight: '102px'
       });
    });
</script>

※containerheight: ’102px’のところは、画像の高さ（height）を設定しています。私が今回のサンプル作成にあたり用意した4枚の画像の高さです。クロスフェードして表示される画像は同じ領域に表示する為、全部同じ画像サイズにする必要があります。

以下パラメータの説明です。

animationtype: ‘slide’, // アニメーションの種類（’fade’ 又は ‘slide’ (デフォルト値は ‘fade’)）
speed: 1000, // フェイドの速さ（ミリ秒又は ‘slow’,'normal’,'fast’(デフォルト値は’normal’)）
timeout: 5000, // フェイド間の時間の設定（ミリ秒(デフォルト値は2000））
type: ‘sequence’, // スライドショーの種類（’sequence’,'random’,'random_start’(デフォルト値は’sequence’））
containerheight: ’102px’ //囲んだ要素の高さ、(デフォルト値はauto)

以上です。
（詳細はサンプルのソースを参考にして下さい。）

さて、4.のHTMLはリスト要素なので、liの中にブロック要素もインライン要素も入れる事が可能です。サンプルではインライン要素であるaタグを挿入していますが、ブロック要素であるタグdivやhタグも入れて良い事になります。ですので、もうひとつサンプルを作ってみました。（ニュースティッカー的に使うとこのようになるのではないでしょうか。）

サンプルを見る

以下、サンプルのHTMLのソースです。

<ul id="portfolio">
  <li><h3>NEWS</h3>
     <a href="http://miracle-ysdesign.com/blog/webdesignconnection/103.html">Lava Lamp Menu でロールオーバー表現を豊かにする</a>
  </li>
  <li><h3>NEWS</h3>
     <a href="http://miracle-ysdesign.com/blog/wordpress/118.html">Lightbox 2プラグイン導入！ </a>
  </li>
  <li><h3>NEWS</h3>
     <a href="http://miracle-ysdesign.com/blog/javascript/75.html">HTMLで雑誌のような美しい段組みレイアウトを実現するjQueryプラグイン！</a>
  </li>
  <li><h3>NEWS</h3>
     <a href="http://miracle-ysdesign.com/blog/javascript/140.html">tablesorterを使ってテーブルのソートを可能にする</a>
  </li>
</ul>

なかなかオシャレですね。（え？スクリプトが凄いからだよですって？はい・・・その通りでございます・・・涙）
簡単にFLASHの様な手法を実現出来るのでいろいろなシーンで活躍してくれそうな予感がします！！