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

10436 ワード
codepen HTML ポップアップ lightbox モーダル HTML テキストリンク

手順

1. 最新のjQueryとLightbox2を読み込む

以下のページから最新のものをコピーしてheadタグの末尾に追加する

例（Pug）
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"
)
例（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>

2. 画像の設定

枠を消す場合はこちらを参照

例（Pug）
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"
      )
例（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>
例（Stylus）
stylus
body
  background-color: #49d9ff29

/* 中央揃え */
.blue_sky
  display: flex
  justify-content: center
  padding-top: 50px
例（CSS）
CSS
body {
  background-color: rgba(73,217,255,0.161);
}

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

3. 全体のコードとプレビュー

  • 「View Compiled」を押すと Pug -> HTML、Stylus -> CSS に切り替わる
  • 「0.5x」で見ることを推奨

See the Pen popup-lightbox2 by Probability Hill (@probabilityhill) on CodePen.

参考