大きな画像を上下左右にスライドさせて表示するプラグイン。
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を大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。