(^^)v3

画像を拡大表示する方法

先のエントリで２枚のサムネール画像をクリックすると拡大画像を表示するしくみを用意した。実は極々簡単なJavaScriptで実現している。coolなウェブサイトではもっと凝ったしくみを用意しているようだが、あまり凝ったギミックを使ってもしかたないのでこんな形にしてみた。

さて、この表示は次のような理屈で動作する。

1. .macに新しく用意された「Web」フォルダの中にある「Sites」フォルダ（※１）に任意のフォルダ（※２）を用意してその中に画像ファイルを放り込む。放り込む画像ファイルは1個だけでよい。1つのファイルから、サムネール・拡大画像両方を作り出す。
2. サムネールを表示したいところに <img src="http://web.mac.com/《ユーザーID》/《フォルダ名（※２）》/《画像ファイル名》?transform=small" /> と記述してサムネールを表示させる。（※３）
3. .macサーバーの任意の場所に後述するようなJavaScriptを組み込んだ.htmlファイルを仕込んでおく。
4. 前述したサムネールにJavaScriptを組み込んだhtmlファイルにリンクを設定する。ただし、リンクに「？」を付与し、その後に拡大表示させたいファイル名を記述する。（※４）

function zoomingImage() {
 var filpth = location.search;
 filpth = filpth.substring(1,filpth.length);
  if( filpth.length==0) {
   document.write('no image');
  } else {
   document.write('<img src="http://web.mac.com/《ユーザーID》/《フォルダ名（※２）》/' + filpth + '?transform=large" />');
  }
 }

別段めんどくさいことをしているわけではありません。JavaScriptはロケーションのqueryを表示すべきファイル名として認識しているだけです。一つのファイルからサムネール＋拡大画像を表示させているのは本来非公開の.macサムネールAPIを利用しています。このAPIに関しては、極々簡単に以前紹介させていただいていました。

すごくかっこいい表示方法として、つい最近「mojo」さんが紹介していました。

これなんかに比べれば稚拙だし、エラーチェックも不十分だし、何より會澤環境にひどく依存していたりするかもしれない。でも、構造が簡単なので使う人が改造できるというのがいいのではないかと勝手に思っていたりする。

會澤はこの辺の説明へたくそなので、先のエントリや、読み込んでいるJavaScriptを見て抱くなりして理解を深めていただきたい。な〜んて偉そうなこといってもしゃ〜ないなぁ。