紙芝居のようなスライド処理用JavaScript (Slider.js)
2007年5月15日(火) 08:00
写真などスライド表示するJavaScriptライブラリはいろいろとあるが、今までありそうで無かったスライドエフェクトを実装できるライブラリ。Slider.jsを導入することで、写真やFlashコンテンツなどを組み合わせて、紙芝居のようなスライド表示することができる。
動作にはprototype.jsおよびScriptaculousが必要になる。すでにこれらのフレームワークを導入している場合も、新規に導入する場合も簡単に利用できるよう、ダウンロードファイルには、これらのライブラリを含む必要なファイルがすべて含まれている。
設置に関するドキュメントは特に無いので、ダウンロードファイルに含まれるサンプルを参考に導入を進めれば良い。Slider.jsで実装できるスライド処理は非常にシンプルなもので、インターバルを利用して自動でスライドを切り替えたい場合は、別途処理を追加する必要がある。
インターバル処理で自動的に変更するには、以下のように記述する
<script type="text/javascript">
//スライダーオブジェクトの作成
var my_slider = new Slider('my-slider', {duration:0.5});
//自動でスライドを切り替える
var auto =function(){ my_slider.next(); }
setInterval(auto,2000);
</script>Slider.jsに用意されている処理を利用して、インターバルで呼び出すだけで良い。これだけの記述でスライド処理の実装が完了してしまう。上記で紹介した方法ではナビゲーションと組み合わせた場合に難がある。興味のある方は、実装にチャレンジしていただきたい。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

