Memo for a Moment ～ Web2.0を追い求めて～

Ads by Google

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スライダーで画像を拡大・縮小

prototype.jsに基づくAjaxライブラリの一つであるscript.aculo.us

を利用して、スライダーで画像の大きさを変えられるようにしてみた。

スライダーの導入方法

prototype.js, scriptaculous.js, slider.jsを使う。で読み込みの際に、scriptaculous.js?load=読み込みたいjsをコンマで区切ると書けば他のjsファイルは読みこまないらしいので~~そうしてみた。~~ slider.jsだけでいいみたい。。。とほほ

オブジェクトの作成方法

new Control.Slider( つまみのid, 後ろの板のid,
{
sliderValue : 小数, ← 初期値
range:$R(最小値, 最大値), ← 取り得る値の範囲
onChange:function(value){ ← つまみが止まったら実行される
～
},
onSlide:function(value){ ←つまみが動かされたら実行される
～
}
} );

htmlの定義

＜div="後ろの板のid"＞＜div="つまみのid"＞＜/div＞＜/div＞とすればＯＫ

後はこれをポップアップで表示して、sliderオブジェクトを作成。そのときonChange,onSlideにスライダーの値を画像に反映させるコードを追加してあげれば、、、
※ポップアップ表示の仕方はこちら