ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

widget faderで フラッシュを使わずに Ajaxで画像のフェードイン、フェードアウトをさせる

複数の画像を フェードインフェードアウトで切り替えて表示をさせることができるwidget fader というAjaxのライブラリを紹介

これであればフラッシュを使わずにAjaxのみで画像のフェードイン、フェードアウトをさせることができる

またフェードイン、フェードアウトで画像が消えたり出てきたりする時間を個別に調整できる。

widget fader サンプル


http://web-directors.net/sample/fader/samplefader.html


サンプルのHTMLソースを解説


http://web-directors.net/sample/fader/samplefader.html
サンプルのHTMLソースは、下記のようなソースコードになっているので下の解説をみつつ利用してください


ーーーーーーーーーーーーーーーーーーーーーーーー

「prototype.js」「effects.js」「fader.js」読み込み
をおこなう この3つのファイルが画像のフェードイン、フェードアウトの処理をしてくれている

<script src='js/prototype.js'></script>
<script src='js/effects.js'></script>
<script src='js/fader.js'></script>



<script>
Event.observe(window, "load", function() {
//Images Array used in all demos
var images = [


↓↓切り替え表示したい画像を順番に記載していく

"images/fader/GN023_L.jpg",
"images/fader/GN028_L.jpg",
"images/fader/GN032_L.jpg",
"images/fader/GN037_L.jpg",
"images/fader/GN043_L.jpg"
];

//Default fader


こちらのnew Widget.Fader()の最初のパラメーター「defaultDemo」が<body>以下に記載されるフェードイン、フェードアウトの処理をさせたい画像の<img>タグのid名になります

new Widget.Fader("defaultDemo", images);

//Fader with options

new Widget.Fader("optionsDemo", images, {
fadeInDuration: 0.6,
<!-- フェードインの処理にかかる時間を設定する 上記の場合 0.6秒 -->


fadeOutDuration: 0.3,
<!-- フェードアウトの処理にかかる時間を設定する  上記の場合 0.3秒 -->

displayDuration: 0.3 
<!-- 画像が表示さている時間を設定する 上記の場合 0.3秒 -->
});


});
</script>
</head>

<body>

↓はじめにでてくるデフォルトの画像をいれておく
この場合「GN023_L.jpg」になる。

また、「id='defaultDemo'」は
「new Widget.Fader("defaultDemo", 」でつけた「new Widget.Fader」のパラメーターが入ります。

-->

<img id='defaultDemo' src='images/fader/GN023_L.jpg' />





ーーーーーーーーーーーーーーーーーーーーーーーー

本家サイトはこちら↓


http://www.eternal.co.za/scripts/fader/

ページの一番下にdownloadがあるので、そちらからスクリプトを取得して利用してください。

ダウンロードすると、いろいろファイルがはいってきますが、その中から「js」フォルダを開くと





で利用する、「prototype.js」「effects.js」「fader.js」がはいっていますのでそちらをリンクさせてください。


上のコードを実際に表示してみたサンプル


http://web-directors.net/sample/fader/samplefader.html

と同じように作る場合は「prototype.js」「effects.js」「fader.js」以外のjsファイルは必要ありません






Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集