Prototipo di Lightbox personalizzato

Don · 25 Maggio 2021, 5:31pm

Questo è già disponibile come componente del tema.

Ciao,

Il mio forum è molto ricco di immagini e volevo apportare alcune modifiche al lightbox predefinito di Magnific Popup per renderlo più amichevole. Non sono un esperto, ma forse può servire come spunto o qualcuno più esperto potrà creare un componente del tema o qualcosa di simile partendo da questo prototipo. Grazie!

Qual è la differenza?

Sfondo nero
Contenitore fisso (l’immagine rimane sempre sullo schermo)
Rimozione dei padding per visualizzare l’immagine a tutto schermo
Spostamento di tutti i pulsanti sotto il div .mfp-container
Pulsanti fissi (sempre visibili sullo schermo)
Ridisegno dei pulsanti
Aggiunta di un pulsante dedicato per lo zoom (particolarmente utile quando si è nella vista galleria con più immagini). Con questo pulsante è possibile ingrandire e rimpicciolire l’immagine corrente.
Nella mia istanza nascondo il testo .mfp-title (didascalia), ma il link per il download rimane visibile.

</head>

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

      // Sposta il pulsante di chiusura sotto il div contenitore
      $(".mfp-container").append($(".mfp-close"));

      // Aggiungi il pulsante per lo zoom
      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="Ingrandisci immagine"><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="Rimpicciolisci immagine"><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>');
        
        // Se clicchi sul pulsante di zoom, alterna la classe
        $(".full-size-btn").click(function () {
          $(".mfp-wrap").toggleClass("mfp-full-size-scrollbars");
        });
      }

      // Previene lo zoom quando si clicca sull'immagine
      $(document).on("click", ".mfp-img", function() {
        $(".mfp-img").css("max-height", $(window).height());
      });

      // Se hai ingrandito e clicchi sull'immagine o sulle frecce, passa alla prossima immagine nella dimensione normale
      $(".mfp-img, .mfp-arrow").click(function () {
        if ($(".mfp-wrap").hasClass("mfp-full-size-scrollbars")) {
          $(".mfp-wrap").removeClass("mfp-full-size-scrollbars");
        }
      });
    });
  });
</script>

COMUNE / 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%;
  }
}

// Barra inferiore

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

// Titolo

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

// Contatore

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

// Pulsanti

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

// Zoom personalizzato

.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

Galleria (più foto)

Foto singola

Don · 2 Luglio 2021, 6:06am

Ciao,
non riesco a modificare l’OP, quindi condivido qui. Ho aggiornato la sezione CSS. Credo che corregga un nuovo cambiamento nel core. Prima avevo aggiunto .mfp-figure:after { box-shadow: none; }, che causava una linea bianca verticale sul lato destro dell’immagine nella lightbox. L’altra cosa è ridimensionare leggermente il CSS e utilizzare alcuni @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 inferiore

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

// Titolo

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

// Contatore

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

// Pulsanti

.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 personalizzato

.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 Luglio 2021, 9:04pm

L’ho resa una post wiki, quindi ora puoi modificarla

Argomento		Risposte	Visualizzazioni
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1728	Maggio 14, 2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2656	Settembre 5, 2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2184	Novembre 3, 2025
Magnific Popup mobile css UX	1	851	Maggio 21, 2021
Allow swipe up/down actions to close images on mobile Feature	8	1272	Ottobre 15, 2022

Prototipo di Lightbox personalizzato

Argomenti correlati