Prototipo de Lightbox Personalizado

Don · 25 Mayo, 2021 17:31

Esto ya está disponible como componente de tema.

Hola,

Mi foro tiene muchas imágenes y quería hacer algunos cambios en el lightbox Magnific Popup predeterminado para hacerlo más amigable. No soy un experto, pero quizás esto sirva de idea o alguien más experto cree un Componente de Tema o algo similar a partir de este prototipo. ¡Gracias!

¿Cuál es la diferencia?

Usar fondo negro
Usar contenedor fijo (la imagen siempre en pantalla)
Eliminar rellenos para ver la imagen a tamaño de ventana completa
Mover todos los botones debajo del div .mfp-container
Botones fijos (siempre visibles en pantalla)
Rediseñar botones
Añadir botón de zoom dedicado (especialmente útil cuando estás en vista de galería más imágenes). Con este botón puedes hacer zoom in y out en la imagen actual.
En mi instancia oculto el texto .mfp-title (pie de foto). Pero el enlace de descarga es visible.

\u003c/head\u003e

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

      // Mover botón de cerrar debajo del div contenedor
      $(\".mfp-container\").append($(\".mfp-close\"));

      // Añadir botón de zoom
      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=\"Zoom in image\"\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=\"Zoom out image\"\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');
        
        // Si haces clic en el botón de zoom, alternar clase
        $(\".full-size-btn\").click(function () {
          $(\".mfp-wrap\").toggleClass(\"mfp-full-size-scrollbars\");
        });
      }

      // Prevenir zoom al hacer clic en la imagen
      $(document).on(\"click\", \".mfp-img\", function() {
        $(\".mfp-img\").css(\"max-height\", $(window).height());
      });

      // Si haces zoom in y haces clic en la imagen o en las flechas, pasa a la siguiente imagen en tamaño normal 
      $(\".mfp-img, .mfp-arrow\").click(function () {
        if ($(\".mfp-wrap\").hasClass(\"mfp-full-size-scrollbars\")) {
          $(\".mfp-wrap\").removeClass(\"mfp-full-size-scrollbars\");
        }
      });
    });
  });
\u003c/script\u003e

COMÚN / 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%;
  }
}

// Barra inferior

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

// Título

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

// Contador

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

// Botones

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

// Zoom personalizado

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

Demo

Galería (más fotos)

Fotografía individual

Don · 2 Julio, 2021 06:06

Hola,
No puedo editar el primer mensaje, así que lo comparto aquí. He actualizado la sección de CSS. Creo que soluciona un nuevo cambio en el núcleo. Antes añadía .mfp-figure:after { box-shadow: none; }, lo que causaba una línea blanca vertical en el lado derecho de la imagen en el lightbox. Lo otro es que he reducido un poco el CSS y he utilizado algunos @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%;
  }
}

// Barra inferior

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

// Título

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

// Contador

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

// Botones

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

// Zoom personalizado

.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 · 5 Julio, 2021 21:04

Lo convertí en un post de wiki para que ahora puedas editarlo

Tema		Respuestas	Vistas
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1728	14 Mayo 2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2656	5 Septiembre 2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2186	3 Noviembre 2025
Magnific Popup mobile css UX	1	851	21 Mayo 2021
Allow swipe up/down actions to close images on mobile Feature	8	1272	15 Octubre 2022

Prototipo de Lightbox Personalizado

Temas relacionados