「Flickr画像検索」のブログパーツに利用した「フェードインフェードアウト」JavaScript

 先日ブログにしました、「Flickr画像検索」のブログパーツの機能に用いた、フェードインからフェードアウトするスライドショーのJavaScriptをご紹介します。
 このスクリプトは、簡単に設置できます。注意点として、画像を読み込む際に一列に全ての画像が表示されるため、(JavaScriptを切るとわかりやすいです。)表示するサイズを固定し、はみ出た部分をスタイルシートで「overflow:hidden;」とすると良いと思います。

 JavaScriptはこちら(slayeroffice.com)に配布されています。

 まず、リンク先のページ下部からxfade2.jsファイルをダウンロードしてください。あとは、xfade2.jsを読み込みスタイルシートを利用するだけです。(同ページにあるCSSを利用しても可)


 詳しい設置方法に関しては、「DesignWalker(フェードイン&アウトするスライドショーJavaScript: xfade2.js)」さんのページが参考になります。


 ちなみに、xfade2.jsのファイルの読み込みについては、スライドショーを表示する部分の前に記述すれば、どこにおいても動きます。また、画像切り替えの速度は、xfade2.jsの58行目にある「setTimeout(so_xfade,1000);」の数値を変更することで可能です。単位はミリ秒(ms)なので、5秒なら5000、10秒なら10000になります。


 JSとスタイルシートで実現でき、画像ファイル名も問わない(半角英数字)のでお手軽です。オススメ〜
2008.03.26

コメント投稿フォーム