jQuery:CrossSlide

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