JQueryプラグイン「CrossSlide」で思い出に浸る系のスライドショーを実装（サンプル・使い方付)。
写真を美しく見せるJQueryプラグインが多数ありますが、
本日は、思い出に浸れるスライドショー「CrossSlide」を
実装方法を兼ねてご紹介致します。
ネタ元は以下。
CrossSlide - A jQuery plugin to create pan and cross-fade animations
「CrossSlide」では、以下３つの思い出に浸れるスライドショーを実装できます。
Slide + cross-fade
複数の写真を上下にクロスフェードさせながらスライドする。
Static cross-fade
複数の写真をクロスフェードさせながらスライドする。
Ken Burns effect
特定のポイントからズームイン・クロスフェードさせながらスライドする
上記に関して、クロスフェードするスピードと時間、
ズームインの比率を設定できるようです。
では以下より、「Slide + cross-fade」の実装方法をご紹介。
※実装にはJQUery.jsも必要なので、あらかじめセットしておきましょう。
(1)JSファイルをダウンロード。
CrossSlide - A jQuery plugin to create pan and cross-fade animations
よりjquery.cross-slide.jsをダウンロード。
ダウンロード先はページ最下部にあります。
任意のディレクトリにjquery.cross-slide.jsをアップします。
当ブログのサンプルページでは以下のような設定しました。
<script src="jquery.cross-slide.js" type="text/javascript"></script>
(2)表示するJSを記述
<script type='text/javascript' id='source-test1'>//<![CDATA[
$(function() {
$('#test1').crossSlide({
speed: 45, //px/sec
fade: 1 //sec
}, [
{ src: 'img/FC021_L.jpg', dir: 'up' },
{ src: 'img/FC029_L.jpg', dir: 'down' },
{ src: 'img/FC034_L.jpg', dir: 'up' },
{ src: 'img/FC078_L.jpg', dir: 'down' },
{ src: 'img/FC105_L.jpg', dir: 'up' },
{ src: 'img/FC144_L.jpg', dir: 'down' },
{ src: 'img/FC173_L.jpg', dir: 'up' }
]);
});
//]]></script>
<div id='test1'>Loading...</div>
「#test1」には、DIVなど任意のブロック要素名を配置します。
$('#test1').crossSlide({
「speed」ではクロスフェードの早さ、「fade」ではフェードさせる時間を設定します。
speed: 45, //クロスフェードの早さ fade: 1 //フェードさせる時間
スライドさせる画像のパスを設定。
「dir」の「up」「down」では上下どちらからのクロスフェードなのかを設定します。
複数の写真がある場合には、「,」(カンマ)区切りでセット。
{ src: 'img/FC021_L.jpg', dir: 'up' }, //upなので上からフェード
最後にCrossSlideを表示するブロック要素を配置すれば完了です。
<div id='test1'>Loading...</div>
ブロック要素内のテキストはリロードしている時に表示される内容です。
サンプルでは、テキストで「Loading...」と記述していますが、
ローディングイメージをセットしてあげてもいいですね。
毎度のことながら、Javascriptコードは無知に等しい管理人ですが、
なんとはなしにコードを見ながら、実装したらできました！
MTなどで作ったフォトログなんかだったら、CustomFieldを組み合わせたら、
自動でスライドショーとして組み込めそうですね。
技術的な質問にはお答えできませんがｗ、本サイトのコードをコピペしたら、
うまくできそうなので、是非チャレンジしてみて下さい。
関連エントリー
トラックバック(0)
このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/240
コメントする
お気軽にコメントをどうぞ！
