「Flickr画像検索」のブログパーツに利用した「フェードインフェードアウト」JavaScript : ういすぷの記録帳

ういすぷの気ままに綴るブログです。
フィギュア、グッズ、カプセルトイ（ガチャ）、食玩、付録、ぬいぐるみ、購入の際の梱包写真、PCなどのハードウェア、他にもオリジナルのWebサービスなどをご紹介しています。
フィギュアは、少し前の物を多く更新しています。懐かしいなとか感じてもらえると嬉しいです。

ご意見・ご感想は、記事下にあるフォームまたは、こちらの問い合せフォームからご投稿ください。写真などのご利用につきましては、サイトについてをご覧下さい。

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

2008.03.26

　先日ブログにしました、「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とスタイルシートで実現でき、画像ファイル名も問わない(半角英数字)のでお手軽です。オススメ～