カスタムライトボックスプロトタイプ

Don · 2021 年 5 月 25 日午後 5:31

これはすでにテーマコンポーネントとして利用可能です

こんにちは、

私のフォーラムは画像が非常に多く、デフォルトの Magnific Popup ライトボックスを少し変更して、より親しみやすいものにしたいと思いました。私は専門家ではありませんが、このプロトタイプからアイデアとして役立つか、あるいはより専門的な方がテーマコンポーネントや類似のものを作成してくれるかもしれません。ありがとうございます！

何が違うのでしょうか？

黒い背景を使用
固定コンテナ（画像が常に画面に表示される）
パディングを削除して画像をウィンドウ全体サイズで表示
すべてのボタンを .mfp-container div の下に移動
固定ボタン（常に画面に表示される）
ボタンのデザイン変更
ズーム専用ボタンの追加（特にギャラリービューで複数の画像を表示する際に便利です）。このボタンで現在の画像を拡大・縮小できます。
私のインスタンスでは .mfp-title（キャプション）テキストを非表示にしていますが、ダウンロードリンクは表示されます。

\u003c/head\u003e

\u003cscript type=\"text/discourse-plugin\" version=\"0.8.18\"\u003e
  $(document).ready(function() {
    $(\"body\").click(function() {

      // 閉じるボタンをコンテナ div の下に移動
      $(\".mfp-container\").append($(\".mfp-close\"));

      // ズームボタンを追加
      if($(\".full-size-btn\").length \u003c= 0){
        $(\".mfp-container\").append('\u003cdiv class=\"full-size-btn mfp-prevent-close\"\u003e\u003cspan class=\"plus-btn mfp-prevent-close\" title=\"画像を拡大\"\u003e\u003csvg class=\"fa d-icon d-icon-plus svg-icon svg-node mfp-prevent-close\" aria-hidden=\"true\"\u003e\u003cuse xlink:href=\"#plus\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/span\u003e\u003cspan class=\"minus-btn mfp-prevent-close\" title=\"画像を縮小\"\u003e\u003csvg class=\"fa d-icon d-icon-minus svg-icon svg-node mfp-prevent-close\" aria-hidden=\"true\"\u003e\u003cuse xlink:href=\"#minus\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/span\u003e\u003c/div\u003e');
        
        // ズームボタンをクリックしたらクラスを切り替え
        $(\".full-size-btn\").click(function () {
          $(\".mfp-wrap\").toggleClass(\"mfp-full-size-scrollbars\");
        });
      }

      // 画像をクリックしたときのズームを防止
      $(document).on(\"click\", \".mfp-img\", function() {
        $(\".mfp-img\").css(\"max-height\", $(window).height());
      });

      // ズームイン後に画像または矢印をクリックすると、通常のサイズで次の画像へ移動
      $(\".mfp-img, .mfp-arrow\").click(function () {
        if ($(\".mfp-wrap\").hasClass(\"mfp-full-size-scrollbars\")) {
          $(\".mfp-wrap\").removeClass(\"mfp-full-size-scrollbars\");
        }
      });
    });
  });
\u003c/script\u003e

共通 / SCSS

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 1;
  background-color: #000000;
}

.mfp-container {
  position: fixed;
  overflow: auto;
  padding-left: 0px;
  padding-right: 0px;
}

.mfp-figure {
  \u0026:after {
	top: 0;
	bottom: 0;
	box-shadow: none;
  }
}

img.mfp-img {
  padding: 0;
}

.mfp-force-scrollbars {
  .mfp-img {
	max-width: 100%;
  }
}

// 下部バー

.mfp-bottom-bar {
  margin-top: 0;
  padding: 0.3em 0;
}

// タイトル

.mfp-title {
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  .image-source-link {
	right: 6px;
	position: absolute;
	visibility: visible;
  }
}

// カウンター

.mfp-counter {
  right: 10px;
  top: -25px;
  min-width: 40px;
  color: #000000;
  background: #ffffff;
  border-radius: 4px;
  opacity: .65;
  font-weight: bold;
  text-align: center;
}

// ボタン

.mfp-close-btn-in .mfp-close {
  right: 15px;
  top: 15px;
  width: 44px;
  height: 44px;
  position: fixed;
  text-align: center;
  padding-right: 0;
  background: #ffffff;
  color: #000000;
  border-radius: 50%;
  -webkit-box-shadow: inset 0px 0px 0px 3px #000;
  -moz-box-shadow: inset 0px 0px 0px 3px #000;
  box-shadow: inset 0px 0px 0px 3px #000;
}

button.mfp-arrow {
  background: #ffffff;
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  -webkit-box-shadow: inset 0px 0px 0px 6px #000;
  -moz-box-shadow: inset 0px 0px 0px 6px #000;
  box-shadow: inset 0px 0px 0px 6px #000;
  \u0026:after {
	top: -3px;
  }
}

.mfp-arrow-left {
  left: 3px;
  \u0026:before {
	display: none;
  }
  \u0026:after {
	border-right: 17px solid #000;
	margin-left: 30px;
  }
}

.mfp-arrow-right {
  right: 3px;
  \u0026:before {
	display: none;
  }
  \u0026:after {
	border-left: 17px solid #000;
	margin-left: 40px;
  }
}

.full-size-btn {
  left: 15px;
  bottom: 25px;
  width: 44px;
  height: 44px;
  position: fixed;
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-up-1);
  z-index: 1046;
  cursor: -moz-pointer;
  cursor: -webkit-pointer;
  cursor: pointer;
  opacity: .65;
  -webkit-box-shadow: inset 0px 0px 0px 3px #000;
  -moz-box-shadow: inset 0px 0px 0px 3px #000;
  box-shadow: inset 0px 0px 0px 3px #000;
  \u0026:hover {
	opacity: 1;
  }
  .minus-btn {
	display: none;
  }
}

// カスタムズーム

.mfp-full-size-scrollbars {
  .mfp-img {
	max-width: none !important;
	max-height: none !important;
  }
  .mfp-figure {
	overflow: auto;
	figure {
	  overflow: auto;
	}
  }
  button.mfp-arrow {
	position: fixed;
  }
  .full-size-btn {
	.minus-btn {
	  display: block;
	}
	.plus-btn {
	  display: none;
	}
  }
}

デモ

ギャラリー（複数の写真）

単一の写真

Don · 2021 年 7 月 2 日午前 6:06

こんにちは、
OP を編集できないため、ここに共有します。CSS セクションを更新しました。これは新しいコアの変更への対応だと思います。以前は .mfp-figure:after { box-shadow: none; } を追加していましたが、これによりライトボックス内の画像の右側に垂直の白い線が表示される問題が発生していました。その他、CSS を少し圧縮し、いくつかの @mixin を使用するようにしました。

@mixin mfp-btn-shadow($size, $shadow, $br) {
  width: $size;
  height: $size;
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
  border-radius: $br;
}

@mixin mfp-bg-color-op() {
  background: #ffffff;
  color: #000000;
  opacity: .65;
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 1;
  background-color: #000000;
}

.mfp-container {
  position: fixed;
  overflow: auto;
  padding-left: 0px;
  padding-right: 0px;
}

.mfp-figure {
  &:after {
    top: 0;
    bottom: 0;
  }
}

img.mfp-img {
  padding: 0;
}

.mfp-force-scrollbars {
  .mfp-img {
    max-width: 100%;
  }
}

// 下部バー

.mfp-bottom-bar {
  margin-top: 0;
  padding: 0.3em 0;
}

// タイトル

.mfp-title {
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  .image-source-link {
    right: 6px;
    position: absolute;
    visibility: visible;
  }
}

// カウンター

.mfp-counter {
  right: 10px;
  top: -25px;
  min-width: 40px;
  @include mfp-bg-color-op();
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

// ボタン

.mfp-close-btn-in .mfp-close {
  right: 15px;
  top: 15px;
  position: fixed;
  text-align: center;
  padding-right: 0;
  background: #ffffff;
  color: #000000;
  @include mfp-btn-shadow(44px, $shadow: inset 0px 0px 0px 3px #000, $br: 50%);
}

button.mfp-arrow {
  background: #ffffff;
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
  @include mfp-btn-shadow(90px, $shadow: inset 0px 0px 0px 6px #000, $br: 50%);
  &:after {
    top: -3px;
  }
}

.mfp-arrow-left {
  left: 3px;
  &:before {
    display: none;
  }
  &:after {
    border-right: 17px solid #000;
    margin-left: 30px;
  }
}

.mfp-arrow-right {
  right: 3px;
  &:before {
    display: none;
  }
  &:after {
    border-left: 17px solid #000;
    margin-left: 40px;
  }
}

.full-size-btn {
  left: 15px;
  bottom: 25px;
  position: fixed;
  @include mfp-bg-color-op();
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-up-1);
  z-index: 1046;
  cursor: -moz-pointer;
  cursor: -webkit-pointer;
  cursor: pointer;
  @include mfp-btn-shadow(44px, $shadow: inset 0px 0px 0px 3px #000, $br: 50%);
  &:hover {
    opacity: 1;
  }
  .minus-btn {
    display: none;
  }
}

// カスタムズーム

.mfp-full-size-scrollbars {
  .mfp-img {
    max-width: none !important;
    max-height: none !important;
  }
  .mfp-figure {
    overflow: auto;
    figure {
      overflow: auto;
    }
  }
  button.mfp-arrow {
    position: fixed;
  }
  .full-size-btn {
    .minus-btn {
      display: block;
    }
    .plus-btn {
      display: none;
    }
  }
}

codinghorror · 2021 年 7 月 5 日午後 9:04

ウィキ投稿にしましたので、今から編集できます

トピック		返信	表示
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1728	2025 年 5 月 14 日
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2656	2023 年 9 月 5 日
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2186	2025 年 11 月 3 日
Magnific Popup mobile css UX	1	851	2021 年 5 月 21 日
Allow swipe up/down actions to close images on mobile Feature	8	1272	2022 年 10 月 15 日

カスタムライトボックスプロトタイプ

関連トピック