커스텀 라이트박스 프로토타입

Don · 5월 25, 2021, 5:31오후

이미 테마 컴포넌트로 이미 제공됩니다.

안녕하세요,

제 포럼은 이미지가 매우 많아서 기본 Magnific Popup 라이트박스를 조금 수정하여 더 사용자 친화적으로 만들고 싶었습니다. 저는 전문가가 아니지만, 이 아이디어가 좋거나 더 전문가적인 분이 이 프로토타입을 기반으로 테마 컴포넌트나 유사한 것을 만들어 주시면 좋겠습니다. 감사합니다!

무엇이 다른가요?

검은색 배경 사용
고정된 컨테이너 사용 (이미지가 항상 화면에 표시됨)
패딩 제거하여 이미지 전체를 창 크기로 표시
모든 버튼을 .mfp-container div 아래로 이동
고정된 버튼 (항상 화면에 표시됨)
버튼 재설계
전용 줌 버튼 추가 (특히 갤러리 보기에서 여러 이미지를 볼 때 유용함) 이 버튼으로 현재 이미지를 확대/축소할 수 있습니다.
제 인스턴스에서는 .mfp-title (캡션) 텍스트를 숨깁니다. 하지만 다운로드 링크는 표시됩니다.

</head>

<script type="text/discourse-plugin" version="0.8.18">
  $(document).ready(function() {
    $("body").click(function() {

      // 닫기 버튼을 컨테이너 div 아래로 이동
      $(".mfp-container").append($(".mfp-close"));

      // 줌 버튼 추가
      if($(".full-size-btn").length <= 0){
        $(".mfp-container").append('<div class="full-size-btn mfp-prevent-close"><span class="plus-btn mfp-prevent-close" title="이미지 확대"><svg class="fa d-icon d-icon-plus svg-icon svg-node mfp-prevent-close" aria-hidden="true"><use xlink:href="#plus"></use></svg></span><span class="minus-btn mfp-prevent-close" title="이미지 축소"><svg class="fa d-icon d-icon-minus svg-icon svg-node mfp-prevent-close" aria-hidden="true"><use xlink:href="#minus"></use></svg></span></div>');
        
        // 줌 버튼을 클릭하면 클래스 토글
        $(".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");
        }
      });
    });
  });
</script>

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 {
  &: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;
  &: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;
  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;
  &: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 · 7월 2, 2021, 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%;
  }
}

// Bottom bar

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

// Title

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

// Counter

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

// Buttons

.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;
  }
}

// Custom zoom

.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 · 7월 5, 2021, 9:04오후

위키 포스트로 만들었으니 이제 수정할 수 있어요

글		댓글	조회수
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	2006	5월 14, 2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	5	2866	9월 5, 2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements feedback , new-feature , lightbox	18	2427	7월 12, 2025
Magnific Popup mobile css UX	1	881	5월 21, 2021
Allow swipe up/down actions to close images on mobile Feature	8	1438	10월 15, 2022

커스텀 라이트박스 프로토타입

Related topics