zoomingがいい感じ

ブログのテーマの調整も一段落といった感じで落ち着きました。

unsweets.logの画像拡大にはzoomingというライブラリを使って画像クリック時の拡大表示の処理をしています。一言で言えばMediumのような表示を行ってくれます。同じようなライブラリにzoom.jsがありますが、こちらはjQueryに依存しているので利用は避けました。forkでvanillaのものを作成されている方もいるようですが…。

モバイルデバイスのようなタッチデバイスの操作にも対応しています。その他細かいオプションも指定できるようですが、ブログではほとんど設定を変えていません。

const isMobile =
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent,
  );
 
Zooming.config({
  bgOpacity: 0.8,
  bgColor: "#000",
  preloadImage: !isMobile,
});

プリロードの設定も行えるので適当なモバイル判定で設定するようにしてみましたが、自分自身もテザリングでラップトップを使うことがあるのであんまり信頼できない設定だったり…。 Network Information APIというものもあるそうですが、まだ草案状態でどのブラウザでも実装してないようですね。

普通は画像にリンクしているサムネイル画像をクリックすることで拡大が見れるということを考えたら<a href="foo.jpg"><img src="foo.jpg"></a>というマークアップが普通だと思うのですが、これだとZoomingの処理が入らないので、このブログではJavaScriptで適当に属性設定をしています。

const $ = document.querySelectorAll.bind(document);
 
Array.prototype.slice.call($(".article-body a > img")).forEach((img) => {
  const a = img.parentNode;
  a.addEventListener("click", (e) => e.preventDefault());
  img.setAttribute("data-action", "zoom");
  img.setAttribute("data-original", a.href);
});

これで自然なマークアップになりました。