画像の拡大表示-Volar2

この機能は個人用。

ブラウザで画像を表示できる範囲には限界があります。
たとえば2カラムのページであれば横幅は最大で700～1000px程度でしょうか。

しかしながら仮に横幅1000pxに収めようとした際、画像内の情報がかなり多い場合はどうしても一つ一つが小さくなって見づらくなるケースもあります。
商品画像だった場合は細部までもっと確認したいのに商品画像が小さすぎて結局よくわからなかったなんてこともあるかもしれません。

そういった要望に応える形で画像の拡大機能を《Volar2》に搭載してみました。

画像拡大機能は「Luminous」というプラグインを導入して実現してます。
このプラグインはとても軽量でページ読み込みにもほとんど影響を与えません。

特長はクリック（or タップ）で画像が拡大され、どこかをクリックで元に戻るというシンプルな動きです。
また拡大元と拡大後の画像を別のものに指定することもできるので、クリックすると別の画像が表示されるなんてこともできます。

下にデモを用意しました。
拡大可能な画像については拡大可能を知らせる拡大アイコンを左上に表示させる設定にしてあります。

※画像クリックタップで拡大、どこかをクリックタップすれば元に戻ります。
（スマホでは画面幅に合わせるようにサイズ調整されるので、画像によっては同じ大きさの画像が表示されるケースが多くなるかと思います）

画像拡大が必要なケースはそうはないと思うので、ここでは画像拡大が必要なページでの読み込み方式をご紹介します。

ファイルの読み込み

画像拡大を使いたいページの［エントリーページ（個別ページ）の設定］を開き、こちらで用意した2個のモジュールを挿入します。

編集画面の画像拡大を使いたい場所にこちらで用意したひな型コードを挿入します。
（［カスタム文字装飾］や［定型文］などに登録しておくと1発で挿入できます）

あとは画像拡大元の画像と画像拡大後の画像をそれぞれSIRIUS2の画像挿入機能で差し込めば設置完了です。
（※1ヵ所だけ画像ファイル名で差し替える箇所があります）

用意する画像

拡大元と拡大後の画像が同じ場合は2ヵ所とも同じ画像ファイルで設定します。
ただし用意する画像のサイズが小さい場合（横幅最大700～750px程度）は画像を拡大してもブラウザ上とほとんど同じ大きさでしか表示されないため拡大するメリットがあまりありません。

そのためこの機能を使うなら拡大した時に大きく表示されるようある程度大き目のサイズ（横幅1200pxとか）で作成しておくといいでしょう。

ブラウザ上ではコンテンツ幅に自動縮小された画像幅で表示され、クリックタップするとオリジナルサイズでの表示になります。
（「画像の最適化」機能を使うとファイル容量を軽くできます）