Prototype deLightbox personnalisé

Don · Mai 25, 2021, 5:31

Ceci est déjà disponible en tant que composant de thème.

Bonjour,

Mon forum est très riche en images et je voulais simplement apporter quelques modifications au lightbox Magnific Popup par défaut pour le rendre plus convivial. Je ne suis pas un expert, mais cela pourrait être une bonne idée, ou peut-être qu’un expert plus chevronné créera un composant de thème ou quelque chose de similaire à partir de ce prototype. Merci !

Quelle est la différence ?

Utilisation d’un fond noir
Utilisation d’un conteneur fixe (l’image reste toujours à l’écran)
Suppression des marges pour afficher l’image en taille plein écran
Déplacement de tous les boutons sous le div .mfp-container
Boutons fixes (toujours visibles à l’écran)
Refonte des boutons
Ajout d’un bouton de zoom dédié (particulièrement utile lorsque vous êtes en vue galerie avec plusieurs images). Avec ce bouton, vous pouvez zoomer et dézoomer l’image actuelle.
Sur mon instance, je cache le texte .mfp-title (légende). Cependant, le lien de téléchargement reste visible.

\u003c/head\u003e

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

      // Déplacer le bouton de fermeture sous le conteneur div
      $(".mfp-container").append($(".mfp-close"));

      // Ajouter le bouton 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="Zoomer l'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="Dézoomer l'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 vous cliquez sur le bouton de zoom, basculez la classe
        $(".full-size-btn").click(function () {
          $(".mfp-wrap").toggleClass("mfp-full-size-scrollbars");
        });
      }

      // Empêcher le zoom lorsque vous cliquez sur l'image
      $(document).on("click", ".mfp-img", function() {
        $(".mfp-img").css("max-height", $(window).height());
      });

      // Si vous zoomez et cliquez sur l'image ou les flèches, cela passe à l'image suivante en taille normale
      $(".mfp-img, .mfp-arrow").click(function () {
        if ($(".mfp-wrap").hasClass("mfp-full-size-scrollbars")) {
          $(".mfp-wrap").removeClass("mfp-full-size-scrollbars");
        }
      });
    });
  });
\u003c/script\u003e

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

// Barre du bas

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

// Titre

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

// Compteur

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

// Boutons

.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 personnalisé

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

Démo

Galerie (plusieurs photos)

Photo unique

Don · Juillet 2, 2021, 6:06

Bonjour,
Je ne peux pas modifier le premier message, je partage donc ici. J’ai mis à jour la section CSS. Cela corrige, je suppose, un nouveau changement au niveau du cœur. Auparavant, j’avais ajouté .mfp-figure:after { box-shadow: none; }, ce qui provoquait une ligne blanche verticale sur le côté droit de l’image dans la lightbox. L’autre chose est de réduire un peu le CSS et d’utiliser quelques @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%;
  }
}

// Barre du bas

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

// Titre

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

// Compteur

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

// Boutons

.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 personnalisé

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

J’en ai fait un post wiki, tu peux donc le modifier maintenant

Sujet		Réponses	Vues
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1728	Mai 14, 2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2656	Septembre 5, 2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2186	Novembre 3, 2025
Magnific Popup mobile css UX	1	851	Mai 21, 2021
Allow swipe up/down actions to close images on mobile Feature	8	1272	Octobre 15, 2022

Prototype deLightbox personnalisé

Sujets connexes