十七夜屋メモ

宿木庵のドット絵をクリックすると拡大するようにしたので、後々メンテしたい時に備えて手順や動作をメモしておく。こういう条件で：

• 1ページに複数個、imgタグで表示しているドット絵がある状態
• それぞれのページを編集せず、テーマ側に手を入れるだけで対応したい
• マウスを使わない端末のことも考えるとマウスオーバーではなくクリックで表示したい
• ドット絵の原寸が様々なので、表示にあたっては縦横比を崩さずに大きさを指定できる必要がある

結論としてはjQueryでimgをクリックしたとき、拡大表示用の空divの背景にクリックした画像を設定する、というだけ。
クリックするまでは空divは隠しておきたいので、divには隠す用class（クリックすると外れる）と表示する時に適用するスタイルをかいたclass、及び表示先として指定するためのidをつけた。

.hidepix{display:none;}
.pix{
  width: 200px;height:200px;
  background-size: contain;
  background-repeat: no-repeat;
/* http://memo.sdn-project.net/post/113148316679/pixelated */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -webkit-crisp-edges;          /* Safari */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
}

こんな感じ。先人の知恵に感謝。
なんで背景画像にしたかというとbackground-size: contain;で縦横比を維持したままで大きさを指定できる方法が他に思いつかなかったので。
imgの大きさをjsで取ってきて掛け算して表示するとかそういうあたまいいことするのは私には難しそうだったし、これなら表示領域が固定なので大きい画像を不意に拡大してはみ出したりする危険もないのがいいかなと思った。

発想は昔のイラストサイトとかで■をonclickで次々画像を切り替えるタイプのギャラリーを見た記憶から来てます。

jqueryを使った他のプラグインとかがあるせいか、入れ子にした内側の部分だけでは動かなかった。正直よくわからないけど最終的に動いたからなんでもいいや。

jQuery.noConflict();
jQuery(function($) {
  $("img").click(function(){
   $("#pix").removeClass("hidepix")
   $("#pix").css("backgroundImage","url('"+this.src+"')");
  })
});