2007-09-24

Interface Elements の Slider で旅行写真を拡大(または縮小)表示する


デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。
    var handle = $('<div />')
.addClass('handle');
$('<div />')
.addClass('slider')
.append(handle)
.appendTo('#r')
.Slider({
accept: $('.handle'),
onSlide: function(cordx) {
$('img', '#r')
.attr('width', .6 * cordx + 60)
.attr('height', .45 * cordx + 45);
}
});
ハンドルをスライダしたとき、その値 0 から 100 に応じて、旅行写真の画像サイズを変化させています。横サイズは最小 60 から 最大 120 まで、縦サイズは最小 45 から 90 まで変化します。

世界の車窓から ―あこがれの鉄道旅行― Vol.4 遥かなる大地を行く(DVD付)世界の車窓から ―あこがれの鉄道旅行― Vol.4 遥かなる大地を行く(DVD付)

世界の車窓から あこがれの鉄道旅行  -vol.3 歴史街道を走る 世界の車窓から―あこがれの鉄道旅行〈VOL.2〉大自然を駆け抜ける 世界の車窓から あこがれの鉄道旅行 Vol.1 遺産と古都をめぐる 今すぐ乗りたい!「世界名列車」の旅 豪華列車の旅―一度は乗りたいベスト20 日本の「カシオペア」から、「女王陛下の御召し列車」まで (日経ホームマガジン OFFムックSpecial)

by G-Tools

0 件のコメント: