ajaxの記事一覧 « | AirNX 開発者ブログ

CrossSlide フェード効果のスライドショー JQuery

写真をフェードさせながらスライドショーするjs、『CrossSlide』のご紹介です。
『CrossSlide』はJQueryプラグインでとても簡単に実装出来ます。
Flashを作るのはちょっと面倒な時とか、予算的に厳しい時にも役に立つと思います。

CrossSlideデモ、配布サイト

当サイトのトップページにも使用例があります。

さて、同じようなことをFlashではなく『CrossSlide』でするメリットは、

写真を用意するだけで簡単にスライドショーができる。
写真の差し替えが簡単に出来る。
写真枚数の変更が簡単。
写真にリンクを指定出来る。

デメリットは、

パソコンのスペックが良くないとカクカクする。
JavaScriptがオフだと見れない。

と今簡単に考えただけですが、Flashではない強みと弱みがあります。

Flashの場合写真を差し替えたり、枚数を増やしたりする場合は、その都度Flashのドキュメントファイルを編集しなければいけませんが、『CrossSlide』は画像を上書きするか、jsファイルの一部を書き換えるだけで簡単に実現出来ます。この辺は写真の差し替えを頻繁にしたいサイトの場合、かなりメリットになりそうです。しかし動きがパソコンのスペックに左右されるので、その部分が導入するか否かのネックになって来そうです。

導入手順1

まず、『CrossSlide』よりjquery.cross-slide.jsをダウンロードします。
ダウンロードリンクはページの一番下にあります。

任意のディレクトリにjquery.cross-slide.jsをアップし、
htmlの<head>〜</head>に下記を追記します。

導入手順2

任意のディレクトリを作りそこに画像をアップロードし、
htmlの<head>〜</head>に下記を追記します。

<script type='text/javascript'>
$('#test1').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'img/001.jpg' },
{ src: 'img/002jpg' },
{ src: 'img/003.jpg' },
{ src: 'img/004.jpg' }
]);
</script>

続いて<body>〜</body>内のスライドショーを表示させたい部分に下記を追記。

<div id="test1">Loading...</div>

青色の文字の部分が上のJavaScriptで指定したidになるようにします。以上で画像がクロスフェードする単純な動作はします。「Loading...」は読み込み中や、javascriptがオフの時に表示されます。テキストではなく適当な画像を入れておけば、javascriptがオフの時にもレイアウトが崩れません。

エフェクト

さらに動きに変化を加えることも出来ます。

デモ3参照

<script type='text/javascript'>
$('#test3').crossSlide({
loop: 1,
fade: 1
}, [
{
src: 'lib/sand-castle.jpeg',
href: 'http://flickr.com/photos/spacetrucker/94209642/',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
}, {
src: 'lib/sunflower.jpeg',
href: 'http://flickr.com/photos/hichako/1125341449/',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
}, {
src: 'lib/flip-flops.jpeg',
href: 'http://flickr.com/photos/jayniebell/1125216143/',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2 }, { src: 'lib/rubber-ring.jpeg',
href: 'http://flickr.com/photos/ruminatrix/1125292682/',
from: '100% 50%',
to: '30% 50% 1.5x',
time: 2
}
]);
</script>