【LIGHTBOX】画像を拡大してポップアップ表示できるようにする

はじめに

このサイトのベーステーマは、Astro Boilerplate を使用しています。

このテーマは、記事内に記載した画像を拡大する機能を装備していません。そのため、自分で調べて実装してみようと思います。

よくある手段

画像を拡大表示する手段で、よくあるのは下記があると思います。

画像をクリックすると、そのタブ、または新しいタブで画像を開く
画像をクリックすると、そのタブ内でポップアップ表示する

両方とも試してみる

今回使用する画像は、こちらです。

順番に試してみます。

画像をクリックすると、そのタブ、または新しいタブで画像を開く

これはimgタグをaタグで挟んで実装します。
そのタブで開くか、別のタブで開くかは、target属性でターゲットを指定します。

値	説明
_self	現在の閲覧コンテキストです。（既定値）
_blank	ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
_parent	現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。
_top	最上位の閲覧コンテキスト（現在のコンテキストの祖先である “最上位” のコンテキスト）です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。

引用: MDN Web Docs - HTML 要素リファレンス

<a href="{imgUrl}" target="_blank"><img src="{imgUrl}"></a>

画像をクリックすると、そのタブ内でポップアップ表示する

これは、Lightbox2というJavaScriptライブラリを用いて実現出来るようです。 CDN経由で、Lightbox用のファイルとjQueryを読み込み、使用します。

head

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

body

<a href="{imgUrl}" data-lightbox="{任意の文字列}" data-title="{任意の文字列}">
  <img src="{imgUrl}" />
</a>

結果

サイトの外観を損なわないように、拡大しないと見えないサイズの文字が描画された画像を使用する機会があると思います。そういった場合に、閲覧者に画像を簡単に拡大表示してもらうために、LIGHTBOXは非常に有用だと感じました。

これを機に、このサイトに掲載していた画像は全てLIGHTBOXを使用するように変更しました。

【LIGHTBOX】 画像を拡大してポップアップ表示できるようにする