skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」

｜ ｜ ｜ ｜ ｜ ｜ ｜

iPodやiPhoneでインターフェースの良さが評価されるapple社。
そのベースとなったMacにはiPhotoという画像を収縮できるギャラリーが搭載されています。
iPhoto-like image resizingでは、iPhotoをWeb上でも 使用できるjavascriptを紹介しています。

使用方法
prototypeとscript.aculo.usが必要になります。
<script src="http://yourdomain/prototype.js" type="text/javascript"<>/script>
<script src="http://yourdomain/scriptaculous.js" type="text/javascript"<>/script>
<style type="text/css">
#track {width:180px;background:url(slider_track.gif) center left repeat-x;height:18px;margin:4px 0 5px 10px;padding:0}
#track {width:18px;height:18px}
.case {border:1px solid #DDD;width:424px;overflow:auto;margin:0}
.iPhoto {width:190px;padding:10px;float:left;}
</style>
とheadにスクリプトとCSSを加え、以下のようなHTMLを記述します。
<div id="track">
<div id="handle"><img src="scaler_slider.gif"></div>
</div>
<div class="case">
<img src="画像" width="100%" class="iPhoto">
<!-- 画像分 -->
</div>
最後にもう一つスクリプトを書き込みます。
<script type="text/javascript">
function scaleIt(v) {
var scalePhotos = document.getElementsByClassName("iPhoto");
floorSize = .26;
ceilingSize = 1.0;
v = floorSize + (v * (ceilingSize - floorSize));
for (i=0; i < scalePhotos.length; i++) {
scalePhotos[i].style.width = (v*190)+"px";
}
}
var demoSlider = new Control.Slider('handle','track',
{axis:'horizontal', minimum: 0, maximum:200, alignX: 2, increment: 2, sliderValue: 1});
demoSlider.options.onSlide = function(value){
scaleIt(value);
}
demoSlider.options.onChange = function(value){
scaleIt(value);
}
</script>
iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」サンプル

記事作成：2007年09月03日

前の記事：フォームを彩るjavascript「mooFancyForm」
次の記事：自動文字参照javascript「jQuery Autocomplete」