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付) by G-Tools