Прототип пользовательского лайтбокса

Don · 25.Май.2021 17:31:32

Это уже доступно как компонент темы.

Здравствуйте,

Мой форум очень насыщен изображениями, и я хотел внести некоторые изменения в стандартный лайтбокс Magnific Popup, чтобы сделать его более дружелюбным. Я не эксперт, но, возможно, это послужит хорошей идеей, или кто-то более опытный создаст на основе этого прототипа компонент темы или что-то подобное. Спасибо!

В чём разница?

Используется чёрный фон
Используется фиксированный контейнер (изображение всегда на экране)
Убраны отступы для отображения изображения во весь размер окна
Все кнопки перемещены под div .mfp-container
Кнопки зафиксированы (всегда видны на экране)
Переработан дизайн кнопок
Добавлена отдельная кнопка масштабирования (особенно полезная при просмотре галереи с несколькими изображениями). С помощью этой кнопки можно приближать и отдалять текущее изображение.
В моём экземпляре я скрываю текст .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>

ОБЩИЕ / 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 · 02.Июль.2021 06:06:59

Здравствуйте,
Я не могу отредактировать исходный пост, поэтому делюсь здесь. Я обновил раздел 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 · 05.Июль.2021 21:04:18

Я сделал это вики-постом, так что теперь вы можете его редактировать

Тема		Ответов	Просм.
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1759	14.05.2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2677	05.09.2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2210	03.11.2025
Magnific Popup mobile css UX	1	854	21.05.2021
Allow swipe up/down actions to close images on mobile Feature	8	1276	15.10.2022

Прототип пользовательского лайтбокса

Связанные темы