Custom Lightbox Prototype

Hello,

My forum is really image heavy and I wanted to just make some changes in the default Magnific Popup lightbox to make it more friendly. I am not an expert but maybe is good for idea or someone more expert will make a Theme Component or something like that from this prototype. :slightly_smiling_face: Thank you! :heart:


What is the difference?

  1. Use black background
  2. Use fixed container (image always on screen)
  3. Remove paddings to view image in full window size
  4. Move all buttons under .mfp-container div
  5. Fixed buttons (always visible on screen)
  6. Redesign buttons
  7. Add dedicated zoom button (especially useful when you in gallery view more images) With this button you can zoom in and out the current image.
  8. On my instance I hide the .mfp-title (caption) text. But the download link is visible.

</head>

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

      // Move close button under container div
      $(".mfp-container").append($(".mfp-close"));

      // Add zoom button
      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="Zoom in image"><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="Zoom out image"><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>');
        
        // If you click the zoom button toggle class
        $(".full-size-btn").click(function () {
          $(".mfp-wrap").toggleClass("mfp-full-size-scrollbars");
        });
      }

      // Prevent zoom when you click the image
      $(document).on("click", ".mfp-img", function() {
        $(".mfp-img").css("max-height", $(window).height());
      });

      // If you zoom in and click the image or arrows than it goes to next image in normal size 
      $(".mfp-img, .mfp-arrow").click(function () {
        if ($(".mfp-wrap").hasClass("mfp-full-size-scrollbars")) {
          $(".mfp-wrap").removeClass("mfp-full-size-scrollbars");
        }
      });
    });
  });
</script>

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

// Bottom bar

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

// Title

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

// Counter

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

// Custom 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;
	}
  }
}

Demo

Gallery (more photos)


Single photo

5 Likes