自定义灯箱原型

Don · 2021 年5 月 25 日 17: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

COMMON / 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 日 06:06

你好，
我无法编辑原帖，所以在此分享。我更新了 CSS 部分，这应该修复了一个新的核心变更。之前我添加了 .mfp-figure:after { box-shadow: none; }，但这导致 lightbox 中图片右侧出现一条垂直白线。另外，我稍微精简了 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 日 21: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 日

自定义灯箱原型

相关话题