Image "Popup"

Larger picture pops up when thumbnail is clicked. Click outside image to return.

HTML

<span class="popup_thumb"><a href="#">
      <img width="240" height="190" src="http://www.lauritzen.biz/solutions/gallery/sentinel3.jpg"></a>
      <span class="popup">
          <a class="popup_bg" href="#"></a>
	  <img class="popup_image" src="http://www.lauritzen.biz/solutions/gallery/sentinel3.jpg">
      </span>
  </span>

CSS

.popup_image {
	position: fixed;
	background-color: white;
	https://unsplash.it/480/340?image=0z-index: 3;
	padding: 5px;
	top: 50%;
	left: 50%;
}

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

JavaScript

//Used by /solutions/gallery. Makes full-sized image pop up when the thumbnail is clicked. Click outside to return.

//max portion of screen image can take up
var portionScreen = 0.8;

//hide image popups
$(".popup").hide();

//upon clicking image thumbnail
$(".popup_thumb").click(function(){
	//show popup that is child to thumbnail
	$(".popup", this).show();
	//center image
	positionImage($(".popup_image", this).get()[0]);
});

//upon clicking popup background
$(".popup_bg").click(function(e){
	//hide popup
	$(this).parent(".popup").hide();
	//don't activiate parent thumbnail event
	e.stopPropagation();
});

//centers popup image
function positionImage(img){
	var winWidth = $(window).width();
	var winHeight = $(window).height();
	var imgWidth = img.naturalWidth;
	var imgHeight = img.naturalHeight;
	//if image is proportionally wider than the window
	var wider = imgWidth/winWidth > imgHeight/winHeight;
	if(wider)
		var ratio = portionScreen*winWidth/imgWidth;
	else
		var ratio = portionScreen*winHeight/imgHeight;
	//if image needs to be scaled down
	if(ratio<1){
		if(wider){
			//scale width to fit and scale height proportionally
			var w = String(Math.round(portionScreen*winWidth))+"px";
			$(img).css("width", w);
			var h = String(Math.round(ratio*imgHeight))+"px";
			$(img).css("height", h);
			//trick to center image
			var nhw = String(Math.round(portionScreen*-0.5*winWidth))+"px";
			$(img).css("margin-left", nhw);
			var nhh = String(Math.round(ratio*imgHeight*-0.5))+"px";
			$(img).css("margin-top", nhh);
			return;
		}
		//scale width to fit and scale height proportionally
		var w = String(Math.round(ratio*imgWidth))+"px";
		$(img).css("width", w);
		var h = String(Math.round(portionScreen*winHeight))+"px";
		$(img).css("height", h);
		//trick to center image
		var nhw = String(Math.round(ratio*imgWidth*-0.5))+"px";
		$(img).css("margin-left", nhw);
		var nhh = String(Math.round(portionScreen*-0.5*winHeight))+"px";
		$(img).css("margin-top",...