【Lightbox2】画像をクリックしたら拡大されるようにする（ポップアップ, モーダル）

## 手順
### 1. 最新のjQueryとLightbox2を読み込む
以下のページから最新のものをコピーしてheadタグの末尾に追加する
+ [lightbox2 - Libraries - cdnjs](https://cdnjs.com/libraries/lightbox2)
+ [iQuery CDN](https://releases.jquery.com/)
<details><summary>例（Pug）</summary>

```javascript:Pug
// lightbox2 (lightbox.min.css)
link(
  rel="stylesheet",
  href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css",
  integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==",
  crossorigin="anonymous",
  referrerpolicy="no-referrer"
)

// jQuery (jquery-X.X.X.min.js)
script(
  src="https://code.jquery.com/jquery-3.6.0.min.js",
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=",
  crossorigin="anonymous"
)

// lightbox2 (lightbox.min.js)
script(
  src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js",
  integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==",
  crossorigin="anonymous",
  referrerpolicy="no-referrer"
)
```
</details>

<details><summary>例（HTML）</summary>

```html:HTML
<!-- lightbox2 (lightbox.min.css)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" referrerpolicy="no-referrer">

<!-- jQuery (jquery-X.X.X.min.js)-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- lightbox2 (lightbox.min.js)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```
</details>

### 2. 画像の設定
枠を消す場合はこちらを参照

https://qiita.com/probabilityhill/items/27bce1aa455fd2b9afe4

<details><summary>例（Pug）</summary>

```javascript:Pug
body
  .blue_sky
    a(
      href="https://user-images.githubusercontent.com/74280232/158719438-5e9873b2-eb0a-4053-8b52-4ad52ae1b139.JPG",
      data-lightbox="group"
    )
      img(
        src="https://user-images.githubusercontent.com/74280232/158719438-5e9873b2-eb0a-4053-8b52-4ad52ae1b139.JPG",
        width="200"
      )
```
</details>

<details><summary>例（HTML）</summary>

```html:HTML
<body>
  <div class="blue_sky">
    <a href="https://user-images.githubusercontent.com/74280232/158719438-5e9873b2-eb0a-4053-8b52-4ad52ae1b139.JPG" data-lightbox="group">
      <img src="https://user-images.githubusercontent.com/74280232/158719438-5e9873b2-eb0a-4053-8b52-4ad52ae1b139.JPG" width="200">
    </a>
  </div>
</body>
```
</details>

<details><summary>例（Stylus）</summary>

```sass:stylus
body
  background-color: #49d9ff29

/* 中央揃え */
.blue_sky
  display: flex
  justify-content: center
  padding-top: 50px
```
</details>

<details><summary>例（CSS）</summary>

```css:CSS
body {
  background-color: rgba(73,217,255,0.161);
}

/* 中央揃え */
.blue_sky {
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
```
</details>

### 3. 全体のコードとプレビュー
+ 「View Compiled」を押すと Pug → HTML、Stylus → CSS に切り替わる
+ 「0.5x」で見ることを推奨
+ GitHubにもコードあり（[こちら](https://github.com/probabilityhill/popup-lightbox2)）

<p class="codepen" data-height="361" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="RwxrbyB" data-user="probabilityhill" style="height: 361px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/probabilityhill/pen/RwxrbyB">
  popup-lightbox2</a> by Probability Hill (<a href="https://codepen.io/probabilityhill">@probabilityhill</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 参考
https://lokeshdhakar.com/projects/lightbox2/

https://toretama.jp/click-big-image-floaty.html