タグ アーカイブ: SlideShow

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

<script type="text/javascript" src="/js/jquery.cross-slide.js">

  jQuery(function($) {
    $('#gallery1').crossSlide(
    {
      speed: 15, //in px/sec
      fade: 4    //in sec
    },
    [
      { src: '/tops-1.jpg', dir: 'up'   },
      { src: '/tops-2.jpg', dir: 'down' },
      { src: '/tops-3.jpg', dir: 'up'   }
    ]
  );
});

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

<div>Now Loading ...</div>

#gallery1 {
	width:900px;
	height:388px;
}

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