NET-KING

FLASHのナビゲーションでみる、メニューにマウスオーバーするとメイン画像が切り替わるやつ。探しても思ったようなものがなかったので、jQueryで作成してプラグイン化しました。

こんな動作をします

• ナビゲーションにマウスオーバーすると対応するイメージ画像に切り替わります。
• エリアの外にマウスがあるときは、自動で次のナビゲーションに進みます。
• ロールオーバー前後でナビゲーションの画像が切り替わります。

動作デモはこちら

設置方法

プラグインを下のボタンよりダウンロードします（ダウンロードファイルにはサンプルファイルが含まれています）

ImageNavigationプラグインをダウンロード

このプラグインはjQueryが必要です。

head内

「#image-navigation」の部分はプラグインを適応させたい場所を任意で指定できます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

body内

メニューに表示する画像と対応するイメージ画像を記述します。

<div id="image-navigation">
  <div class="navi">
    <ul>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
    </ul>
  </div>
  <div class="navi-image">
      <a href="#"><img src="images/photo1.jpg" /></a>
      <a href="#"><img src="images/photo2.jpg" /></a>
      <a href="#"><img src="images/photo3.jpg" /></a>
      <a href="#"><img src="images/photo4.jpg" /></a>
  </div>
  <div style="clear:both;"></div>
</div>

これで動作します。

オプション

オプションで色々な設定ができます。

（数字の単位はミリ秒です）

      $(function(){
        $("#image-navigation").imageNavigation({
          time:2000,
          animationTime:500,
          rolloverTime: 0,
          rolloutTime: 500
        });
      });

time
スライドショーで次の画像に移動する時間です。

animationTime
スライドショーで次の画像に切り替わるフェードの時間です。

rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。

rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。

autoPlay
falseにすると自動切り替えしません。

rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。

テキストのナビゲーションのデモはこちら

画像ナビゲーションのロールオーバーの際のファイル名について。
ロールオーバーの画像はファイル名に「_on」をつけた画像が使われまず。用意してください。
例えば「menu01.jpg」という画像のロールオーバー画像は「menu01_on.jpg」になります。

最後に

プラグインに不備があるかもしれませんが、分からない点や不具合などありましたらコメントください。

１枚の画像を次々と表示するスライドショーを実装する、jQueryプラグインのjQuery Cycle Pluginをつかいました。

http://jquery.malsup.com/cycle/
（ダウンロードのリンクは左上に文字リンクがあります）

上のページにデモがありますが、このプラグインは多くの（記事作成時27種類の）トランジションエフェクト（移行効果）をもったスライドショーが実装できます。

設置は簡単です。

head内

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $('.slideshow').cycle();
});
//-->
</script>

body内

<div class="slideshow">
    <img src="images/photo1.jpg" width="200" height="200" />
    <img src="images/photo2.jpg" width="200" height="200" />
    <img src="images/photo3.jpg" width="200" height="200" />
</div>

これだけで、とりあえずスライドショーは設置できます。
これにトランジションエフェクトを加えるには以下のようにします。
トランジションエフェクトを’fade’にする場合。

$('.slideshow').cycle('fade');

または

$('.slideshow').cycle({
  fx: 'fade'
});

トランジションエフェクトには以下の種類が指定できます。
blindX:２つの画像が横方向に入れ替わる
blindY:２つの画像が縦方向に入れ替わる
blindZ:２つの画像が斜め方向に入れ替わる
cover:画像が横から差し込まれる。
curtainX:画像が横に縮まってアウトする。
curtainY:画像が縦に縮まってアウトする。
fade:画像がフェードで入れ替わる。
fadeZoom:画像はフェードアウトしてズームイン。
growX:横に縮まった画像がインしてくる。
growY:縦に縮まった画像がインしてくる。
scrollUp:画像が上に流れる。
scrollDown:画像が下に流れる。
scrollLeft:画像が左に流れる。
scrollRight:画像が右に流れる。
scrollHorz:画像が左に流れる。
scrollVert:画像が下に流れる。
shuffle:トランプをシャッフルするように入れ替わる。
slideX:画像が左に縮まって入れ替わる。
slideY:画像が上に縮まって入れ替わる。
toss:画像が右上に移動してアウト。
turnUp:立方体が下から上に移動するように入れ替わる。
turnDown:立方体が上から下に移動するように入れ替わる。
turnLeft:立方体が右から左に移動するように入れ替わる。
turnRight:立方体が左から右に移動するように入れ替わる。
uncover:画像が横に移動してアウト。
wipe:画像が左上からインしてくる。
zoom:画像がズームしていれかわる。

その他にもオプションが指定できます。

$('.slideshow').cycle({
    fx:      'scrollDown',
    speed:    300,
    timeout:  2000
});

speed:トランジションエフェクトの時間を指定。単位はミリ秒。
timeout:画像が切り替わる時間を指定。単位はミリ秒。
pause:1を指定すると画像にマウスオーバーするとスライドショーが一時停止します。
random:1を指定すると画像をランダムに表示します。
dalay:指定したミリ秒だけスライドを遅れて開始します。負の値も指定できます。
sync:0を指定するとスライドのトランジションが同時に起こらなくなります。

その他、「次へ」「前へ」やページャーででスライドをコントロールすることができます。
詳しくは配布ページのこちらへ。
http://jquery.malsup.com/cycle/int2.html

２つ以上のテーブルの各セル幅を合わせたいことがあります。
テーブルの縦のラインを揃える必要がある場合など。

下のコードを使います。

$(function() {
  cols = $("tr:first td").size();
  for(i=1;i<cols;i++) {
    tmp = 0;
    max = 0;
    $("table").each(function(){
      tmp = $(this).find("td:eq("+(i-1)+")").width();
      if ( tmp > max ) max = tmp;
    });
    $("td:nth-child("+i+")").css('width',max);
    $("td:nth-child("+i+")").addClass("col-"+i);
  }
});

テーブルの１列目のセルには「col-1」というクラス名、２列目には「col-2」というように列ごとにセルにクラス名をつけることはあると思いますが面倒です。

この面倒をjQueryで解決します。

$(function() {
  $("td:nth-child(1)").addClass("col-1");
  $("td:nth-child(2)").addClass("col-2");
  $("td:nth-child(3)").addClass("col-3");
});

これで１列目のセルにcol-1、２列目のセルにcol-2、３列目のセルにcol-3とクラス名がつきます。