--- a/basic.css	Wed Sep 14 22:50:29 2016 +0300
+++ b/basic.css	Wed Sep 14 23:00:04 2016 +0300
@@ -22,7 +22,7 @@
 	padding: 0.5em;
 }
 
-#contents h1 {
+h1 {
 	font-size: 2em;
 	font-family: helvetica;
 	margin-top: 0;
@@ -110,11 +110,6 @@
 div.imageBox img, div.imageCtrl img {
 	border: 0.2em solid black;
 	border-radius: 0.3em;
-	box-shadow: 4px 4px 4px black;
-}
-
-div.imageCtrl {
-	width: 15%;
 }
 
 div.imageBox a:hover img, div.imageBox a:active img, div.imageBox a:focus img,
@@ -122,6 +117,10 @@
 	border: 0.2em solid white;
 }
 
+div.galleryEntry div.imageBox img {
+	box-shadow: 4px 4px 4px black;
+}
+
 img.albumIcon {
 	border: 0.2em solid black;
 	border-radius: 0.6em;
@@ -132,19 +131,75 @@
 	border: 0.2em solid white;
 }
 
-div.imageCBox {
-	text-align: center;
+#imageCBox {
+	position: relative;
+}
+
+div.imageCtrl {
+	min-width: 150px;
+	width: 20%;
+	position: absolute;
+	top: 0;
+	bottom: 2em;
+	background: rgba(0,0,0,0.35);
+}
+
+div.imageCtrl.next, div.imageCtrl.nextBtm {
+	right: 0;
+}
+
+
+div.imageCtrl.prev, div.imageCtrl.prevBtm {
+	left: 0;
+}
+
+
+div.imageCtrl a {
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
-div.imageCtrl, div.imageCBox div.imageBox {
-	display: inline-block;
-	vertical-align: middle;
+div.imageCtrl a img {
+	position: relative;
+	display: block;
+	margin: auto;
+}
+
+
+div.imageCtrl.nextBtm, div.imageCtrl.prevBtm {
+	z-index: 1;
+}
+
+div.imageCtrl.prev, div.imageCtrl.next {
+	background: rgba(0,0,0,0.35);
+	opacity: 0;
+	transition: opacity 0.15s linear;
+	z-index: 10;
 }
 
-div.imageCtrl.next {
-	left: 0;
+div.imageCtrl.prev:hover, div.imageCtrl.next:hover {
+	opacity: 1;
 }
 
+
+#imageImage {
+	position: relative;
+	z-index: 5;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+div.imageCtrl * img {
+	position: absolute;
+	top: 40%;
+}
+
+
+
 div.imageCaption {
 	text-align: center;
 	font-size: 1.5em;
@@ -161,13 +216,30 @@
 
 
 div.infoBox {
+	position: absolute;
+	bottom: 3em;
+	left: 1em;
+	right: 1em;
+	height: auto;
+	min-height: 5em;
+	background: rgba(0,0,0, 0.5);
+
 	text-align: center;
 	margin: 0.5em;
 	padding: 0.5em;
 	border: 0.2em solid white;
 	border-radius: 0.5em;
+
+	opacity: 0;
+	transition: opacity 0.15s linear;
+	z-index: 12;
 }
 
+div.infoBox:hover {
+	opacity: 1;
+}
+
+
 span.infoDateTime {
 	display: block;
 	color: white;
@@ -180,6 +252,7 @@
  * Navigation controls
  */
 div.naviControls {
+	display: none;
 	font-size: 1.5em;
 	text-align: center;
 	margin: 0.5em;

--- a/mgallery.php	Wed Sep 14 22:50:29 2016 +0300
+++ b/mgallery.php	Wed Sep 14 23:00:04 2016 +0300
@@ -577,18 +577,23 @@
     echo mgGetNaviControls($galImagesIndex, $index, $naviFlags);
 
   echo
-    "<div class=\"imageCBox\">\n".
+    "<div id=\"imageCBox\">\n".
+    mgGetNaviControlImageBox($galImagesIndex, $index, "prevBtm", -1).
     mgGetNaviControlImageBox($galImagesIndex, $index, "prev", -1).
     "<div class=\"imageBox\">\n".
-    "<a id=\"imageLink\" target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
-    "<img id=\"imageImage\" src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".chentities($data["base"].$galMedSuffix.$data["ext"])."\"></a>\n".
+//    "<a id=\"imageLink\" target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
+    "<img id=\"imageImage\" src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".chentities($data["base"].$galMedSuffix.$data["ext"])."\">".
+//    "</a>\n".
     "</div>\n".
+    mgGetNaviControlImageBox($galImagesIndex, $index, "nextBtm", 1).
     mgGetNaviControlImageBox($galImagesIndex, $index, "next", 1).
     "<div class=\"imageCaption\">".mgGetArr($data, "caption", "%1", "")."</div>\n".
+    "<a id=\"imageLink\" target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
     "<div class=\"infoBox\">\n".
     mgGetArr($data, "datetime", "<span class=\"infoDateTime\">%1</span>", "", "mgTimeStr").
     implode(", ", array_filter($list, function($a) { return $a !== NULL; })).
-    "</div>\n".
+    "</div>".
+    "</a>\n".
     "</div>\n";
 
   if ($naviFlags & GNAV_BOTTOM)
@@ -605,6 +610,7 @@
       "var mgalNextURL = \"".($nextActive ? $nextURL : "")."\";\n".
       "var mgalExpanded = false;\n".
       "\n";
+
 ?>
 function mgalAddEvent(evobj, evtype, evcallback)
 {
@@ -656,6 +662,64 @@
   return false;
 }
 
+
+function mgalGetWindowSize()
+{
+  var winW = 0, winH = 0;
+  if (typeof(window.innerWidth) == 'number')
+  {
+    // Non-MSIE
+    winW = window.innerWidth;
+    winH = window.innerHeight;
+  }
+  else
+  if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
+  {
+    // MSIE 6+ in 'standards compliant mode'
+    winW = document.documentElement.clientWidth;
+    winH = document.documentElement.clientHeight;
+  }
+  else
+  if (document.body && (document.body.clientWidth || document.body.clientHeight))
+  {
+    // MSIE 4 compatible
+    winW = document.body.clientWidth;
+    winH = document.body.clientHeight;
+  }
+
+  return [winW, winH];
+}
+
+
+function mgalAdjustImage()
+{
+  var eimg = document.getElementById("imageImage");
+  var win = mgalGetWindowSize();
+  var madj = 0.85;
+  if (eimg)
+  {
+    if (eimg.width > eimg.height)
+    {
+      eimg.style.width = "100%";
+      if (eimg.height > win[1] * madj)
+      {
+        eimg.style.width = "auto";
+        eimg.style.height = (win[1] * madj)+"px";
+      }
+    }
+    else
+    {
+      if (eimg.height > win[1] * madj)
+        eimg.style.height = (win[1] * madj)+"px";
+      else
+        eimg.style.height = "100%";
+    }
+  }
+}
+
+
+mgalAddEvent(document.getElementById("imageImage"), "load", mgalAdjustImage);
+mgalAddEvent(window, "resize", mgalAdjustImage);
 mgalAddEvent(document, "keypress", mgalProcessKeyPress);
 
 <?