Benutzerdefinierter Lightbox-Prototyp

Don · 25. Mai 2021 um 17:31

Dies ist bereits als Theme-Komponente verfügbar.

Hallo,

Mein Forum ist sehr bildlastig, und ich wollte einfach einige Änderungen am Standard-Magnific-Popup-Lightbox vornehmen, um es freundlicher zu gestalten. Ich bin kein Experte, aber vielleicht ist dies eine gute Idee, oder jemand mit mehr Erfahrung wird daraus eine Theme-Komponente oder Ähnliches als Prototyp erstellen. Vielen Dank!

Was ist der Unterschied?

Schwarzer Hintergrund
Fester Container (Bild immer auf dem Bildschirm)
Entfernen von Abständen, um das Bild in voller Fenstergröße anzuzeigen
Alle Buttons unter dem .mfp-container-Div verschieben
Fixierte Buttons (immer sichtbar auf dem Bildschirm)
Neugestaltung der Buttons
Hinzufügen eines dedizierten Zoom-Buttons (besonders nützlich in der Galerieansicht mit mehr Bildern). Mit diesem Button können Sie das aktuelle Bild herein- und herauszoomen.
In meiner Instanz habe ich den Text der .mfp-title (Bildunterschrift) ausgeblendet. Der Download-Link ist jedoch sichtbar.

\u003c/head\u003e

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

      // Schließen-Button unter den Container-Div verschieben
      $(\".mfp-container\").append($(\".mfp-close\"));

      // Zoom-Button hinzufügen
      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=\"Bild hereinzoomen\"\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=\"Bild herauszoomen\"\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');
        
        // Wenn Sie auf den Zoom-Button klicken, wird die Klasse umgeschaltet
        $(\".full-size-btn\").click(function () {
          $(\".mfp-wrap\").toggleClass(\"mfp-full-size-scrollbars\");
        });
      }

      // Zoom verhindern, wenn Sie auf das Bild klicken
      $(document).on(\"click\", \".mfp-img\", function() {
        $(\".mfp-img\").css(\"max-height\", $(window).height());
      });

      // Wenn Sie hereinzoomen und auf das Bild oder die Pfeile klicken, wird das nächste Bild in normaler Größe angezeigt
      $(\".mfp-img, .mfp-arrow\").click(function () {
        if ($(\".mfp-wrap\").hasClass(\"mfp-full-size-scrollbars\")) {
          $(\".mfp-wrap\").removeClass(\"mfp-full-size-scrollbars\");
        }
      });
    });
  });
\u003c/script\u003e

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

// Untere Leiste

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

// Titel

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

// Zähler

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

// Buttons

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

// Benutzerdefiniertes Zoomen

.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

Galerie (mehr Fotos)

Einzelnes Foto

Don · 2. Juli 2021 um 06:06

Hallo,
ich kann den ursprünglichen Beitrag nicht bearbeiten, also teile ich es hier. Ich habe den CSS-Bereich aktualisiert. Damit wurde eine neue Kernänderung behoben, wie ich vermute. Zuvor habe ich .mfp-figure:after { box-shadow: none; } hinzugefügt, was eine vertikale weiße Linie auf der rechten Seite des Bildes im Lightbox-Modus verursachte. Das andere ist, dass ich das CSS etwas reduziert und einige @mixin verwendet habe.

@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%;
  }
}

// Untere Leiste

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

// Titel

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

// Zähler

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

// Benutzerdefiniertes 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 · 5. Juli 2021 um 21:04

Ich habe es zu einem Wiki-Beitrag gemacht, damit du es jetzt bearbeiten kannst

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

Benutzerdefinierter Lightbox-Prototyp

Verwandte Themen