نموذج أولي لصندوق إضاءة مخصص

Don · 25 مايو 2021، 5:31م

هذا متاح بالفعل كمكون سمة.

مرحبًا،

منتداي غني بالصور جدًا، وأردت فقط إجراء بعض التغييرات على نافذة العرض المنبثقة الافتراضية 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 · 2 يوليو 2021، 6:06ص

مرحبًا،
لا أستطيع تعديل المنشور الأصلي، لذا سأشارك هنا. قمت بتحديث قسم 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 · 5 يوليو 2021، 9:04م

لقد جعلتُ المنشور صفحة ويكي حتى تتمكن من تعديله الآن

الموضوع		الردود	مرات العرض
Custom Lightbox - modern, swipe gestures, fullscreen mode and more Theme component lightbox	16	1728	14 مايو 2025
Discourse Lightbox - Migrating away from Magnific popup Feature completed , lightbox	6	2657	5 سبتمبر 2023
New Discourse Lightbox Enabled on Meta - now disabled Announcements lightbox , new-feature , feedback	20	2187	3 نوفمبر 2025
Magnific Popup mobile css UX	1	851	21 مايو 2021
Allow swipe up/down actions to close images on mobile Feature	8	1272	15 أكتوبر 2022

نموذج أولي لصندوق إضاءة مخصص

الموضوعات ذات الصلة