jQuery:CrossSlide

jquery

 
大きな画像を上下左右にスライドさせて表示するプラグイン。
Ken Burns effectみたいにグイングインさせるのではなく、up、downにゆるゆると動かしてフェードみたいな感じが使いたくて。
使い方は割と簡単。
注意点は、jquery.js?ver=1.2.6 だと動かなかったこと。jQuery.isEmptyObject()を使っているので、1.4 over じゃないとダメみたいね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $tmp; ?>/js/jquery.cross-slide.js"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('#gallery1').crossSlide(
    {
      speed: 15, //in px/sec
      fade: 4    //in sec
    },
    [
      { src: '<?php echo $img; ?>/tops-1.jpg', dir: 'up'   },
      { src: '<?php echo $img; ?>/tops-2.jpg', dir: 'down' },
      { src: '<?php echo $img; ?>/tops-3.jpg', dir: 'up'   }
    ]
  );
});
</script>

$tmp、$imgはそれぞれのディレクトリを適宜セットすること。
使いたいところに、#gallery1 を書いて、cssは width と height だけ指定しておけば、OK。

<div id="gallery1">Now Loading ...</div>
#gallery1 {
	width:900px;
	height:388px;
}

ウィンドウサイズより画像の方が小さかったり、fadeを大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。

コメントをどうぞ

※ コメントは管理者が承認した後、表示されます。