JSFiddle - React, Tailwind, and code Playground

HTML

<div class="discuss-entry">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</div>

CSS

.lightbox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 99999;
}
.lightbox img {
  position: fixed;
}

JavaScript

$(".discuss-entry img").each(function() {
	var image = $(this);
	var src = image.attr("src");
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var imageWidth = image.outerWidth();
	var imageHeight = image.outerHeight();
	
	var left = ((windowWidth-imageWidth)/2)
	var top = ((windowHeight-imageHeight)/2)
	
	if(image.closest("a")[0]===undefined) {
		image.on("click",function(){
			$("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
            $(".lightbox").on("click", function() {
                $(this).remove();
            });
		});
		
	}
});