kdcsライブラリー

imgnaviのセッティングについて

メインの画像に連動してメニューボタン（画像）も切り替わるナビゲーション
jqueryはgoogleより、1.4.2を使用

head内記述

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.5'></script>
<!--<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にすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。